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)