Web sayfalarınızda kimi zaman özel efektlere ihtiyaç duyarsınız. Bu özel efektlerin biri de mouse ile resim üzerine gelinde resmin büyümesidir.
Mouse ile üzerine gelinde resim büyütme efektini css3 geçişlerini kullanarak elde edebilirsiniz.
Bu işlem için hem html hemde css kodu gerekmektedir ;
HTML kodu içerisinde ki
hover etiketinde resim büyütmenin temel yapısını oluşturuyoruz.
HTML-Kodu
<img src="ircrehberi.png"/>
CSS kodu içerisinde ise resmi yakınlaştırmak için
transform ( geçiş ve dönüştürme ) özelliğini kullanıyoruz.
Css Kodu
Kod
img:hover {
-ms-transform: scale(1.3); /* IE 9 */
-webkit-transform: scale(1.3); /* Safari 3-8 */
transform: scale(1.3);
}