Üzerine Gelince Büyüyen Resim Yapma

Üzerine Gelince Büyüyen Resim Yapma

Web siteniz için üzerine gelince büyüyen resimler yapabilirsiniz. Mouse simgesini resmin üzerine getirdiğiniz zaman istediğiniz belli bir oranda büyütebilirsiniz. Özellikle resim sitesi veya fotoğraflarla ürün tanıtmayı planlıyorsanız büyütme yaparak dikkat çektirebilirsiniz. Bunun için önce büyümesini istediğiniz resimlerin kodlarını ekleyeceğiz, daha sonrada gerekli olan kodlarını ekleyeceğiz. Bu yapı genellikle fotoğraf sitelerinde kullanılıyor. Ziyaretçi ilk olarak ön izleme resmi dediğimiz thumbnail resmini gördüğü zaman görselin üzerine gelir ve görsel otomatik olarak büyür tıklama olmadan işlem gerçekleşir.

Aşağıdaki görsel örnek bir çalışmadır. büyüme oranları üzerinde oynayarak tasarımınıza uygun orana getirebilirsiniz.

Resimler için HTML Kodları

Biz burada örnek olarak 4 adet resim kullanacağız. Burada siz resim linklerini değiştirmeniz yeterlidir. Ancak görsellerin boyutlarının aynı olması görsellik açısından önemli, her IMG tagı için foto-zoom classını tanımlayacağız. Daha sonra bu classı CSS kodları ile istediğimiz efekti uygulayacağız.

<img class="foto-zoom"src="http://www.dijitalteknoloji.net/wp-content/uploads/2012/07/uzay-haberleri.gif">
<img class="foto-zoom"src="http://www.dijitalteknoloji.net/wp-content/uploads/2012/07/araba-haberleri.gif">
<img class="foto-zoom" src="http://www.dijitalteknoloji.net/wp-content/uploads/2012/06/teknoloji-haberleri.gif">
<img class="foto-zoom"src="http://www.dijitalteknoloji.net/wp-content/uploads/2012/05/internet-haberleri.gif">

Resimleri Yakınlaştırmak için CSS Eklemeniz Gereken Kodlar

İlk olarak foto-zoom classını CSS kodları ile tanıtıp özellikler vereceğiz.

.foto-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;
}
.foto-zoom:hover
{
    z-index:2;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);  
    -moz-transform: scale(1.5);
    transform: scale(1.5);
}
Facebook'ta Paylaş Whatsapp'ta Paylaş
Facebook'ta Paylaş Whatsapp'ta Paylaş
Yorumlar

Yorumunuzu Yazın

E-posta adresiniz yayınlanmayacaktır.


Son Yorumlar

  • Emre:Çalışmıyor bu yöntemle yapınca tam ekran oluyor yi...
  • Onur:Teşekkür ederim.İlk yöntem işe yaradı....
  • Zeynebim:2 yıl oldu açamıyorum face mi yardımcı olur musunu...
  • yuksel:hedef bul klasörünün altındaki proxy ile başlayan ...
  • orhan:yusuf.ersoy5457@gmail.com arkadaslar bu hesabın kı...
  • Orhanalaz:Şifremi unuttum tvitira giriş yapamiyirum...
  • GaribanBabası:1- sağ altta bulunun internet erişimi simgesine sa...
  • Kader:Açabildiniz mi heabınızı...
  • Ateş:Güzel paylaşım, teşekkürler......