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

  • 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......