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

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 data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://picsum.photos/id/11/150" alt="150" title="Mouse Hover Ile Büyüyen Resim Efekti (Css) 1"></div>
    <div class="box"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://picsum.photos/id/10/150" alt="150" title="Mouse Hover Ile Büyüyen Resim Efekti (Css) 2"></div>
    <div class="box"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://picsum.photos/id/100/150" alt="150" title="Mouse Hover Ile Büyüyen Resim Efekti (Css) 3"></div>
    <div class="box"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://picsum.photos/id/50/150" alt="150" title="Mouse Hover Ile Büyüyen Resim Efekti (Css) 4"></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;
}