Ü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

  • serdar:Arkadaşlar burada nano teknolojisi hakkında bir ma...
  • admin:Buradakiler anasayfa için anlatılmış eklenti kulla...
  • murat:merhabalar hocam, her yazı eklediğimde mi bu işlem...
  • admin:Bu işlemi yaparsanız belleği formatlamış olrsunuz....
  • Baran Aydın:Abi burda yazan her şeyi yaptım ve usb de olan 29K...
  • Fərid:Nolur arka plan fotoğrafini deyiwmek istiyorum...
  • SAHRA pat:Hesabim kapatıldı yardımcı olun...
  • nedim:Peki bunun tam tersini yapan bir eklenti var mı? Y...
  • İlker Ergün:Müthiş çözüm ya. Kırk yıl düşünsem aklıma gelmezdi...