Mouse Hover ile Büyüyen Resim Efekti (CSS)

YouTube'ta Takip Et →

HTML ve CSS kullanarak, görsellerin üzerine geldiğimizde animasyonlu / hareketli bir şekilde büyüyen galeri sayfasına benzer bir sayfa hazırlıyoruz. Image Card Hover Effect olarak geçen bu efektte Div içerisindeki bir görselin üzerine gelindiğinde görsel büyüyor ve kullanıcı üzerinde güzel bir etki bırakıyor.

HTML kodları olarak aşağıdaki div’leri ve img etiketlerini kullanabiliriz. İmaj olarak lorem ipsum metinleri gibi picsum görselleri kullandım.

<div class="container">
    <div class="box"><img src="https://picsum.photos/id/11/150" /></div>
    <div class="box"><img src="https://picsum.photos/id/10/150" /></div>
    <div class="box"><img src="https://picsum.photos/id/100/150" /></div>
    <div class="box"><img src="https://picsum.photos/id/50/150" /></div>
</div>

Bu efekti sağlayan CSS özelliği transform: scale‘dir. Bu özelliği bir hover’a tanımladığımızda, tanımlanan görsel scale değeri kadar büyüyecektir. Önceki div class’a verilen transition da bu hareketin animasyon şeklinde görünmesini sağlar.

.container {
    width: 80%;
    margin:0 auto;
    padding: 80px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.box {
    width: 150px;
    height: 150px;
    background: gray;
    margin: 0px 14px;
    transition: 0.5s;
}

.box img {border-radius: 6px;}

.box:hover {
    transform: scale(1.2);
    background: black;
    z-index: 2;
}