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:Benim bilgisayarım taktığımda dolum yapıyor yazısı...
  • SUAT DURMUŞ:Çok teşekkürler.Bilgisayarımdaki bu özellik yakın ...
  • hilmi:bende a530 hiç bişey yapamıyom çok kötü bilgisayar...
  • Duygu:Sifremi unuttum youtube yardimci olurmusuniz...
  • abdullah:vestel vtab7 lite 3 en son güncelleme kaç abi...
  • Ahmet yazıcı:Peki imei kayıtını eski bir telden kaydettiler,yaz...
  • Emir:Bendede aynı sorun var düzeltebildinmi...
  • Osman:sizin yazacağınız yönergeye yazayım...saçmalık.....
  • rqzn:puahhah millet buraya hesabımı açın yazmış 200 iq...