Képnek saját effekt
2015.05.03. 18:49, Enma22
Csak bizonyos képekre hat a kód
Nálam is láthatjátok, hogy a babás képnek saját effektje van, vagyis ha ráviszed az egeret, akkor picit halványabb lesz a kép.
Ezt nem csak linkeffektként lehet egy képen megoldani, hanem saját kis class kóddal, amit a szöveg részen is alkalmaztunk már korábban. Igazából ezt több helyen is meg lehet tenni, linkeknél, táblázatoknál, idézetnél, stb.
Az alap kód ez lesz:
<img class="kép" alt="" src="//babablog.gportal.hu/portal/
babablog/image/gallery/tn_1423568347_65.jpg"/></p>
<style type="text/css">
.kép {
opacity: 1;
filter: alpha(opacity=100);}
.kép:hover {
opacity: 0.7;
filter: alpha(opacity=70;
}
</style>
Példát a menü alatti képen láthattok, az osztály (class) neve bármi lehet, akár az is ami jellemzi a képet, például dog, cat, star, macska, hős, kocka, stb.
Természetesen így az effekt csak arra a képre fog hatni, aminek a class neve egyezik a kódban megadott névvel.
Bármely képeffektet alkalmazhatjátok, akár linkelt képen is működik.
És persze, ha több képed van, akár mindnek más effektet adhatsz, de azért ne szaporítsd nagyon túl őket.
A sima és a hover kód egyértelműen különböző kell, hogy legyen, vagy nem ér semmit sem az egész.
Jó kísérletezgetést!