| ExCaLuBuR |
17 Ocak 2021 02:21 |
CSS İle Resimlerin Üzerine Gelince Büyütme
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);
}
|
