HTML ve CSS ile reism üzerine gelince efekt vermek

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);
	}