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

Popular Eğitimler

CSS ile Arama Kutusu Nasıl Yapılır?

CSS ile arama kutusu nasıl hazırlanır? Web siteinzde CSS ile arama kutusu hazırlamak için yapmanız gerekenler nelerdir?

HTML ve CSS ile Mouse Hover Efekti Buton Animasyonu

Hareketli butonlar insanların ilgisini çekebilir. Fare imleci ile üzerine gelindiğinde ilgi çekici…

Etkili SEO Başlığı Nasıl Oluşturulur?

İçeriklerinizin kalitesi ne kadar yüksek olursa olsun aramalarda ziyaretçilerin ilk olarak başlıklar…

CSS ile Hareketli Renkli Gradient Arka Plan

CSS ile sayfalarınıza renk katacak birçok şey yapabiliyorsunuz. Hareketli bir şekilde arka…

CSS ile Linklere Düz Çizgi Yerine Hareketli Dalgalı Çizgi

Linkler varsayılan olarak altı düz çizgili elemanlardır web sitelerinde. Kullanıcının ilgisini çekmesi…

Tüm Tarayıcılarla Uyumlu Smooth Scrolling

Ekrana sığmayan uzun web sayfalarında, anchor linklere tıklandığında Smooth Scrolling denilen yumuşak…