Ez annak a kódnak a leírása, ami nálam is a linkelt képeknél van. Ez egy CSS3 tulajdonság, így nem minden böngészőben működik. Mozilla-ban nincs lassú átmenet, csak egyszerű váltás, IE-ben pedig semmi nincs, még kis halványulás sem.
A kód:
<style type="text/css">
a img /* Ha nincs a linkelt képen az egér */
{opacity: .5; /* Itt állíthatod be, hogy mennyire legyen halvány */
-webkit-transition: .5s ease-in; /* Hány másodpercig tartson az átmenet. (Chrome, Opera...) */
-moz-transition: .5s ease-in; /* Hány másodpercig tartson az átmenet. (Mozilla Firefox) */
-o-transition: .5s ease-in; /* Hány másodpercig tartson az átmenet. (Internet Explorer) */}
a:hover img /* Ha a képen rajta van az egér */
{opacity: 1; /* Itt állíthatod be, hogy mennyire legyen halvány */}
</style>
|
Demo jelenleg látható!
Írtam a kód mellé magyarázatot, hogy ne kelljen itt sokat írnom, de ha valami nem érthető, akkor írjatok nyugodtan a chatbe, a kérdezőbe, vagy e-mailben. Szívesen segítek. :)
|