Oldukça güzel tasarlanmış hover-efekt

0
551
Görüntülenme

hovef

Derek Wheelden tarafından hazırlanmış resim galerileriniz  için kullanabileceğiniz çok güzel bir hover efekti. Aslında  bu hover efekti  jQuery ve Css3 kullanılarak hazırlanmış bir örnekti.  İnstagram api  ile instagram üzerinden en popüler olan kişilerin profillerini rastgele görüntülemeye yarıyordu. Ufacık bir değişiklik yaparak resim galeriler için kullanışlı bir hale getirdim.

Demomuzun şuanki halinde jQuery bulunmuyor. Sadece Css3 kodlar  bulunuyor. Mouse  ile resimlerin üzerine geldiğinizde resimler translateY(100px) değeri ile aşağı kayarken grayscale kullanıldığı için resmimiz siyah beyaz şeklinde görünüyor.  Bu arada resmin arkasında birde küçük yuvarlak görünümlü profil resmi bulunuyor. Bu profil resmide yukarı çıkıp ismin hizasına geliyor. Mouse ile küçük resmin üzerine geldiğinizde resmin etrafında border kaybolup dört köşe bir çerçeve haline geliyor.

Kullanım

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

Css : 

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

Html : 

 

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.