HTML ve CSS ile reism üzerine gelince efekt vermek

HTML ve CSS ile reism üzerine gelince efekt vermek

HTML CSS

Merhaba değerli okurlarımız, bugün HTML ve CSS ile resmin üzerine gelince efekt vereceğiz, sizi fazla tutmadan kodlarımıza geçelim.

HTML Kodları

<div class="card">
	<img src="resim.jpg" alt="">
</div>

CSS Kodları

        body {
	        background: #1a1a1a;
        }

	.card {
		width: 200px;
		height: 250px;
		box-shadow: -20px -20px #2c3333, 0 0 10px rgba(0, 0, 0, .15);
		border-radius: 8px;
		overflow: hidden;
		margin: auto;
		margin-top: 150px;
	}
	.card img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .25s ease-in-out;
	}

	.card:hover img {
		transform: scale(1.25) rotate(10deg);
	}

Yorumlar (0)