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 CSS kullanacağız. Temel mantık yine aynı, yeni bir Div tagı tanımlayacağız. Biz örnekte img-hover-zoom ismini verdik, gerekli CSS 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.
Makalede Neler Var?
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}
HTML Olarak Kullanılacak Örnek Kodlar
<img class="img-hover-zoom"src="https://www.dijitalteknoloji.net/wp-content/uploads/2012/07/uzay-haberleri.gif"> <img class="img-hover-zoom"src="https://www.dijitalteknoloji.net/wp-content/uploads/2012/07/araba-haberleri.gif"> <img class="img-hover-zoom" src="https://www.dijitalteknoloji.net/wp-content/uploads/2012/06/teknoloji-haberleri.gif"> <img class="img-hover-zoom"src="https://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.
