[]
Css Image Hover
Şimdi elimde bir Wp teması var. Portfolyo mantığında bir tema, sayfa (post) olarak girdiğim yazıları ve featured image olarak işaretlersem görselleri ana sayfaya diziyor. Css içerisinde .featured_box diye bir classları var bu kutuların.
Benim öğrenmek ve yapmak istediğim şey, farklı görsellerle kullanılan .featured_box class'ına mouse üzerine gelince hover efekti verebilmek. İmkan varsa bunu transparan bir şekilde yapıp altından çalışmanın gözükmesini de istiyorum.
Bunu yapmak çok zor mu olur?
Benim öğrenmek ve yapmak istediğim şey, farklı görsellerle kullanılan .featured_box class'ına mouse üzerine gelince hover efekti verebilmek. İmkan varsa bunu transparan bir şekilde yapıp altından çalışmanın gözükmesini de istiyorum.
Bunu yapmak çok zor mu olur?
bahsettiğiniz şey daha çok image rollover olarak adlandırılıyor. şu sitede bir kaç satırlık bir kod vermişler.
scruss.com
scruss.com
- gsgsgsgsgsgsgsgs
(12.03.12 16:35:45)
İkinci bir görsel yüklemek istemiyorum. Mesela o ölçüde ama yarı transparanlıkta bir kutu çıksın diğer görselin üzerine mousela gelince. Bunun oluru var mı?
- reyals (12.03.12 16:37:54)
var
css dosyasında box ile ilgili kısmı bul (.featured_box olduğunu varsayıyorum), aşağıdaki bölümü ekle:
.featured_box:hover {
background: none repeat scroll 0 0 rgba(145, 145, 145, 0.50);
}
rgba bölümünde sondaki kısım (0.50) olan şeffaflık yüzdesi.
css dosyasında box ile ilgili kısmı bul (.featured_box olduğunu varsayıyorum), aşağıdaki bölümü ekle:
.featured_box:hover {
background: none repeat scroll 0 0 rgba(145, 145, 145, 0.50);
}
rgba bölümünde sondaki kısım (0.50) olan şeffaflık yüzdesi.
- efx (12.03.12 16:49:08)
2. imaj sabitse yani hep aynı imaj gözükecekse şöyle birşey yapılabilir, ama ayrıca temanın da resimleri ayrı ayrı divlere basması lazım.
öyle ise:
her div'in arka planına background olarak bu sabit görsel atanır. bu classlı divlerin img lerine de transparency 0 verilir. hover anında ise transparency 1 olacak şekilde ayarlanıd. zannedersem istediğiniz bu. ayrıca geçiş efektleri ile i.e. haricindeki browserlarda da daha şık geçişler sağlayabilirsiniz.
öyle ise:
her div'in arka planına background olarak bu sabit görsel atanır. bu classlı divlerin img lerine de transparency 0 verilir. hover anında ise transparency 1 olacak şekilde ayarlanıd. zannedersem istediğiniz bu. ayrıca geçiş efektleri ile i.e. haricindeki browserlarda da daha şık geçişler sağlayabilirsiniz.
- yuto (12.03.12 16:51:05)
1
