Mostanában elég nagy divat, hogy a képek lassan váljanak homályosból élessé, vagy épp fordítva.
Ahhoz, hogy a képed ilyen legyen ezt a kódot kell beillesztened egy jobb vagy bal oldali modulod forráskód nézetébe:
<style type="text/css">
a:link img, a:visited img { /*a linkelt kép kinézete */
filter: alpha(opacity=40);
opacity: 0.4;
-webkit-transition: opacity .3s ease-in; /* Mennyi ideig tartson az átmenet. (Chrome, Opera...-ban) */
-moz-transition: opacity .3s ease-in; /* Mennyi ideig tartson az átmenet. (Mozilla Firefoxban) */
-o-transition: opacity .3s ease-in; /* Mennyi ideig tartson az átmenet. (Internet Explorerben) */
}
a:hover img{ /* linkelt kép kinézete, ha ráviszed az egeret */
filter: alpha(opacity=100);
opacity: 1.0;
}
</style>
Magyarázat
filter: alpha(opacity=40); -> a kép átlátszósága IEben
opacity: 0.4 -> a kép átlátszósága Mozillában
a többi rész pedig az a:link img részben az áttűnést segíti. minél kisebb számot írsz a 3 helyére, annál lassabban fog áttűnni.
A kód az Aranymeli.gpről való!
SAJÁT ÍRÁS
|