Resim Üzerine Gelince Boyutu Değişmeden Yakınlaştırma

Resim Üzerine Gelince Boyutu Değişmeden Yakınlaştırma

Fare ile resmin üzerine geldiğiniz zaman resme otomatik olarak yakınlaştırma uygulayabilirsiniz. Daha önceki yazımızda Mouse ile resmin üzerine geldiğiniz zaman büyüyen resimler yapmıştık, bu sayede ziyaretçilere resimleri daha yakından inceleme imkanı veriyorduk, şimdi ise resmin boyutunu değiştirmeden yakınlaştırma yapacağız. Daha önceki yazımızı incelemek için şurayı ziyaret edebilirsiniz; Üzerine Gelince Büyüyen Resim Yapma diğer yöntemde olduğu gibi burada da kullanacağız. Temel mantık yine aynı, yeni bir Div tagı tanımlayacağız. Biz örnekte img-hover-zoom ismini verdik, gerekli kodlarını tanımladıktan sonra bu özelliğin kullanılmasını istediğiniz resim linklerine tanımladığımız div class’ını vererek bu özelliği tanımlamış olacağız.

CSS’ye Eklenecek Yakınlaştırma Kodları

.img-hover-zoom {height: 250px;overflow: hidden;}
.img-hover-zoom img {transition: transform .5s ease;}
.img-hover-zoom:hover img {transform: scale(1.5);}
.img-hover-zoom {position:relative}

Olarak Kullanılacak Örnek Kodlar

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

Yukarıda belirttiğimiz gibi ilgili kodları CSS’ye tanımladıktan sonra HTML kodlarınıda verdiğimiz örnekteki gibi yapmalısınız. Burada dikkat etmeniz gereken Class ismimiz img-hover-zoom, yine CSS’de img-hover-zoom tagına yakınlaştırma özelliği verdik.

Facebook'ta Paylaş Whatsapp'ta Paylaş
Facebook'ta Paylaş Whatsapp'ta Paylaş
Yorumlar

Yorumunuzu Yazın

E-posta adresiniz yayınlanmayacaktır.


Son Yorumlar

  • Çetin Yitmener:İlgili ilgisiz o kadar açıklama var ki? Hiçbirisi ...
  • kıymet:fesbuk açın eski hesabımı....
  • kıymet:fesbuk kapandı eskı hesabımı açın...
  • kıymet:Yanlışlıkla fesim kapandı.eski hesabımı nasıl yükl...
  • Tuncay:silinen foto ve videolar geri getirme zamanı varmı...
  • upper maker:zaten videoları 600 saniye ye kadar indiriyor....
  • osman:oyun kaldırmıyor ve enkötü telefon bence kullanma...
  • Arda:Düzenle kısmı nerede...