Css Resmin Üzerine Gelince Büyüsün

Css Resmin Üzerine Gelince Büyüsün
Css Resmin Üzerine Gelince Büyüsün

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>

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;
}

Umarım faydalı bir anlatım olmuştur. 


Bugün bir iyilik yap, bu yazıyı arkadaşlarınla paylaş :
Bu yazıdan para kazanabilirsin

BU YAZIYI OKUYANLAR BUNLARI DA OKUDU

YORUMLAR

  1. profilzeliha murda

    Çok güzel olmuş ,fakat biz bu kodları sitemizde yazdığımızda resimler yer değiştiriyor.Bunu için yardım edebilir misiniz?

Yorum yap

Geçersiz bir mail adresi girdiniz. Lütfen tüm zorunlu alanları doldurun. *