CSS ile Üzerine Gelince Büyüyen Resimler

css-hover-zoom-imagesHaziran 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.



  • my

    teşekkürler çok güzel paylaşım fakat çoğu css kodu gibi i8 ve alt sürümlerde çalışmayacaktır.

  • algı

    Kusura bakmayın ben acemiyim yapamadım bu bedava sitemde sayfalara kod olarak ekleyince resimler geliyor alt taraf uymuyor.

  • isa

    haci ne diyon hic bisey anlamadim bi örnek ver

    • fatih

      fotoğrafınızın class özelliğinde adı fotoğrafsa css dosyanıza gelip

      .fotograf:hover
      {

      -webkit-transform: scale(1.5);

      -ms-transform: scale(1.5);

      -moz-transform: scale(1.5);

      transform: scale(1.5);

      }

      demenız yeterli olacaktır

  • korkmaz

    çok işime yaradı..www.iskenderun.com sitem için kullandım.. çok teşekkürler 🙂

  • korkmaz

    çok işime yaradı..www.iskenderun.com sitem için kullandım.. çok teşekkürler 🙂

  • Mert Bozkurt

    Hocam aradığım buydu elinize sağlık fakat fazla zoom yapıyor, zoom oranını küçültebilmek için ne yapmalıyım?