Fotoğraflar için hareketli hover-efekt

0
383
views

resimhov
Bir kaç saat önce aynı  başlıkta buna  benzer  bir konu paylaşmıştık Css3 hover efekti  diye. Bir önceki demo Css3 perspective kullanılarak hazırlanmış Css3 hover efektiydi. Şimdiki demo Css3  scale kullanılarak hazırlanmış bir resim galeri örneği. Css3  scale, nesneleri büyütmek yada küçültmek için kullandığımız bir özelliktir. Aynı mercek  görevi gören bir özelliktir  aynı zamanda. Genişliğini, yüksekliğini belirlemiş olduğunuz nesnelerin ölçeği 1 olarak kabul edilir. Küçültmek için sıfırın altında rakamlar kullanırız  büyütmek içinse 1’den büyük rakamlar kullanırız. Şimdiki Css3 hover efektimizde  ana ekranda  görülen bir  resim var ve ölçeğide 1  olarak ayarlanmış. Hemen arkasında ise resim ile alakalı bir başlık ve  onun ölçeğide 0.5 olarak ayarlanmış. Mouse ile resmin üzerine  geldiğinizde resim ölçeği 5 derece büyürken 140px de aşağı doğru  iniyor. Resmin arkasında  duran 0.5 ölçekl resim başlığı da 1 ölçek oluyor. Bu işlemler  sırasında  Css3 dönüşümler (transform)  kullandığımız için animasyon şeklinde  görülür. Bir  anda  büyüyüp  bir  anda küçülmüyorlar  bu sayede.

 

Kullanım

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

Css :

 

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

Html :

 

Aranan kelimeler:

  • Bide ondan auta minti
1 oy (No Ratings Yet)
Loading...
Önceki İçerikFotolar için Perspective özellikli hover-efekt
Sonraki İçerikAnimeBand
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