CSS segítségével könnyen és egyszerűen átlátszó képeket varázsolhatunk a honlapunkra. Viszont vigyázzunk arra hogy bár nagyon szép design elem egy-egy átlátszó kép, de ne korlátozzuk a fontos képek láthatóságát. Ennek az egyik módja az hogy csak részleges átlátszóságot adunk vagy, egér rátételre megszűnik az átlátszóság.

Alapvetően így írjuk fel:

Mindkét sort érdemes megadni mert míg a opacity számos böngészőben működőképes addig filter az összes többit lefedi ami nem támogatja opacity-t. Az érték 0 és 100 közé eshet, illetve 0 és 1 közé, az alapértelmezett értéke persze a 1 és a 100. A 0 érték is értelmezhető persze, csak nincs sok értelme.

Használhatjuk még az alábbi módon:

Ilyekor akkor válik átlátszóvá a képünk ha rávisszük az egeret. Persze felírhatod úgy is hogy először átlátszó, majd egér rátételével nem lesz az ekkor az img:hover-nek adod az 1 és 100 értékeket és az img értékeit veszed kevesebbre. De tetszés szerint meg is fordíthatod.