CSS ile Üzerine Gelince Büyüyen Resimler

Haziran ayında “Görselleriniz üzerine gelince büyüsün” başlıklı makalemizde,CSS ile görselleri nasıl scale edeceğimizi konuşmuştuk. Bugün de yine aynı yapıyı, birden fazla görselde sunum şeklinde nasıl hazırlayacağımızı konuşacağız.

CSS3 ile yelpazemize renk katan transform tanımı beraberinde scale desteği de sağlıyor.

Moz, ms ve webkit ifadelerini de kullanarak hazırlayacağımız bu yapı görselleri büyütürken ufak bir geçiş efekti de kullanıyor.

Örneği görüntüleyerek başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

Üzerine gelinince resimler büyüsün!

İlk olarak HTML kodlarımızı yazalım. Daha sonra CSS ile hem büyüme efektini hem de geçiş efektini sağlayalım.

HTML Kodları

İlk olarak 4 adet fotoğrafı yanyana koyalım. İstediğiniz fotoğrafı kullanabilirsiniz. Ancak boyutları aynı olursa bütünlük korunur. Her IMG elemanına aw-zoom classını veriyoruz. Bu classı daha sonra CSS ile şekillendireceğiz.

    <img class="aw-zoom" src="http://lorempixel.com/200/200/abstract">
    <img class="aw-zoom" src="http://lorempixel.com/200/200/animals">
    <img class="aw-zoom" src="http://lorempixel.com/200/200/city">
    <img class="aw-zoom" src="http://lorempixel.com/200/200/people">

CSS Kodları

İlk olarak aw-zoom classını tanımlayalım.

.aw-zoom
{
    position: relative;
    -webkit-transform: scale(1); 
    -ms-transform: scale(1); 
    -moz-transform: scale(1);
    transition: all .3s ease-in; 
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
}

Daha sonra aw-zoom classına sahip görsellerin üzerine gelindiğinde uygulanacak aksiyonu hazırlayalım. Burada aktif görselin diğer görsellerin üzerine çıkması için z-index de kullanmamız gerekiyor.

.aw-zoom:hover
{
    z-index:2;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);   
    -moz-transform: scale(1.5);
    transform: scale(1.5);
}

Bu kadar.

Kapanış

Bu sunum yapısı genellikle fotoğraf sanatçıları tarafından tercih ediliyor. Kullanıcı ilk olarak thumbnail kıvamında gördüğü görseli, fareyi üzerine getirerek büyütüyor. Eğer daha da büyük yapıda görmek istiyorsa üzerine tıklıyor.

İyi çalışmalar.