scale ile hazırlanmış hover-efekt

0
421
views

scale

Biraz  önce  yayınladığım jQuery animasyonlu menü örneği bir  hover  efekti hazırlamak istiyordum ama  son anda aklıma böyle  bir şey geldi ve jQuery kullanmaktan vazgeçtim bu sefer. Sadece Css3  kullanarak  hazırladığım bir hover  efekti. Css kodlara bakarsanız  fazla  özllik olmadığını farkedebilirsiniz. Ama  ortaya  güzelbir görüntü çıkmış bence. Çerçeve içinde  görünen bir resim ve resmin önünde  scale değeri 5 opacity değeri sıfır olduğu için görünmeyen bir  açıklama çerçevesi var. Mousenizi  resimlerin olduğu çerçevelerin içinde gezdirdiğiniz  anda resim 5 kat büyürken opacity değeri sıfır olan açıklama kutusunun opacity değeri 1 oluyor ve ölçek ayarıda 5ten 1 e  düşüyor. Bu işlem sırasında Css3 transitions (geçişler)  kullandığım için webkit tarayıcılarında ve Css3 transition destekleyen tarayıcılarda  animasyonlu bir görüntü ortaya çıkıyor. Resim büyürken açıklama küçülüp ekranın ortasına yerleşiyor. Css3 transition desteklemeyen tarayıcılarda ise herşey bir  anda olup bitiyor.

 

Kullanım

  • Head etiketleri arasına eklemeniz gerken bölüm.

Css :

 

  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

 

1 oy (2 votes, average: 4,50 out of 5)
Loading...
Önceki İçerikAnimeBand
Sonraki İçerikRealistic 3D horizontal
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here