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 büyümesini 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 Büyüsün
HTML KODU
<div class="hover1">
<img src="resim_uzantisi.jpg">
</div>
<img src="resim_uzantisi.jpg">
</div>
CSS KODU
.hover1 img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.hover1 img:hover {
width: 400px;
height: 400px;
}
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.hover1 img:hover {
width: 400px;
height: 400px;
}
Umarım faydalı bir anlatım olmuştur.
Toplam 1 Yorum
zeliha murda
13.03.2020 14:32:32
Çok güzel olmuş ,fakat biz bu kodları sitemizde yazdığımızda resimler yer değiştiriyor.Bunu için yardım edebilir misiniz?