Bir Hover Efektini Siteme Uygulama

Merhaba arkadaşlar. İnternet sitemde bir sayfa oluşturdum ve bu sayfaya bir tablonun içinde dikdörtgen resimler yerleştirdim ve bu resimlere linkler verdim.

Ben bu resimlerin üzerine gelindiğinde şu (http://codepen.io/rrenula/pen/pIjBt) sayfadaki gibi büyümelerini istiyorum.

Biliyorum verdiğim bu sayfada zaten bunla ilgili kodlar var ancak CSS bilgim gerçekten çok düşük seviyede. Sadece style.css'ye kodları aktarıp, HTML kodlarını yapıştırmam gerektiğini biliyorum.

Bu konuda yardımcı olabilecek var mı acaba?

Sitemdeki sayfa: blizzardturk.com/heroes-rehberi/kahramanlar

+

Ek olarak bir de şöyle bir şey yapmak istiyorum ancak önceliğim üstteki efekti uygulama:

Bu resimlere etiket gibi bir şey ekleyeceğim. 2 farklı kategoride 7 farklı etiket olacak. İlk kategoride 3 etiket, diğeinde 4 etiket olacak.

Ziyaretçiler yukarıdan seçim yaptığında seçilen etiket (sanırım "class" oluyor bu kodlama dilinde) hangi resimlerde varsa onlar hariç diğerleri %75 şeffaf gözükecek. Bu mümkün müdür?


img:hover {
width: 200px;
height: 200px;
margin-top: -130px;
margin-left: -130px;
top: 65%;
left: 65%;
}



Bu işini görür sanırım

hover mevzusunu şöyle yapmışlar CSS de zaten varda...

ul li img:hover {
width: 200px;
height: 200px;
margin-top: -130px;
margin-left: -130px;
top: 65%;
left: 65%;
}
şunu bi style.css yazın bakalım ne olacak merak ettim imglere yapacaksanız olması lazım liste yapısı görmedim sitenizde...

Bu tüm resimlere hover efekti vermez mi? Yani site genelindeki tüm resimlere?



Liste yok evet, verdiğim linkte liste olarak kodlamış ama 9 kare var tıpkı bir tablo gibi ben de anlamadım.

vermek istediğiniz imglere bi div açıp classınada bi isim verip css de de o clasa atarsanız tüm hepsine yapmamış olacaktır :)

Yani şöyle mi yapmalıyım (yukarıda da dediğim gibi css konusunda cahilim :D)

heroes-img:hover {
width: 200px;
height: 200px;
margin-top: -130px;
margin-left: -130px;
top: 65%;
left: 65%;
}

bunu css'ye ekleyip. kod olarak ta...