CSS3

CSS ile Üstüne Ulaşınca Büyüyen Resimler

css-hover-zoom-imagesHaziran ayında “Görselleriniz üstüne ulaşınca büyüsün” başlıklı makalemizde,CSS ile görselleri iyi mi scale edeceğimizi konuşmuştuk. Bugün de gene aynı yapıyı, birden fazla görselde sunum şeklinde iyi mi hazırlayacağımızı konuşacağız.

CSS3 ile yelpazemize renk katan transform tanımı bununla beraber 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 küçük bir geçiş efekti de kullanıyor.

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

ÖRNEĞİ GÖRÜNTÜLE

Üstüne gelinince resimler büyüsün!

İlk olarak HTML kodlarımızı yazalım. Sonrasında CSS ile hem gelişme efektini hem de geçiş efektini sağlayalım.

HTML Kodları

İlk olarak 4 tane fotoğrafı yanyana koyalım. İstediğiniz fotoğrafı kullanabilirsiniz. Sadece boyutları aynı olursa bütünlük korunur. Her IMG elemanına aw-zoom classını veriyoruz. Bu classı sonrasında 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;


Sonrasında aw-zoom classına haiz görsellerin üstüne gelindiğinde uygulanacak aksiyonu hazırlayalım. Burada etken görselin öteki görsellerin üstüne çı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ı çoğu zaman fotoğraf sanatçıları tarafınca tercih ediliyor. Kullanıcı ilk olarak thumbnail kıvamında görmüş olduğu görseli, fareyi üstüne getirerek büyütüyor. Eğer daha da büyük yapıda görmek istiyorsa üstüne tıklıyor.

İyi emek harcamalar.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu

Reklam engelleyici kullandığınız görülüyor

HAKANSEYHAN.com reklamlarla desteklenen bir sitedir. Sitemizde gezintiye devam etmek için lütfen reklam engelleyiciyi kapatın.