Bu derste oluşturduğumuz bir web sayfasının, CSS kullarak görsellik açısından daha kaliteli şekilde görünmesini sağlamak için resmin üzerine gelince resmin küçülmesi göreceğiz, yani efektler vereceğiz. Bunu yapabilmemiz için CSS'in :hover ve transition özelliklerinden faydalanacağız.
Diğer yapacağımız efektler arasında üzerine gelince; yakınlaşma, uzaklaşma, sağa sola ilerleme, ovalleşme, blurlaşma, siyahlatma efektleri olacak. Bunlara ise aşağıdaki linklerden ulaşabilirsiniz.
- Css Resmin Üzerine Gelince Büyüsün
- Css Resmin Üzerine Gelince Küçülsün
- Css Resmin Üzerine Gelince Hareket Etsin
- Css Resmin Üzerine Gelince Ovalleşsin
- Css Resmin Üzerine Gelince Bulanıklaşsın
- Css Resmin Üzerine Gelince Kararsın
Css Resmin Üzerine Gelince Küçülmesi
HTML KODU
<div class="hover2">
<img src="resim_uzantisi.jpg">
</div>
<img src="resim_uzantisi.jpg">
</div>
CSS KODU
.hover2 img {
height: 400px;
width: 400px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.hover2 img:hover {
width: 300px;
height: 300px;
}
height: 400px;
width: 400px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.hover2 img:hover {
width: 300px;
height: 300px;
}
Umarım faydalı bir anlatım olmuştur.
İlk Yorumu Sen Yap