CSS - Transparantie


Met CSS kan een element of bijvoorbeeld een afbeelding eenvoudig gedeeltelijk transparant worden gemaakt. In dat geval kun je bijvoorbeeld een element of afbeelding gedeeltelijk transparant maken als effect zodra je er met de muis op gaat staan.

Om dit nu toe te passen krijg je onderstaande code met 'opacity'. Door de waarde aan te passen bepaal je in hoeverre het element doorzichtig moet zijn.

img {
        opacity: 0.2;
}


Wil je aanvullend een mouse-over instellen dan kan dat door de doorzichtigheid weer volledig op te heffen zoals gedaan is in de onderstaande code als voorbeeld.

img:hover {
        opacity: 1.0;
}

Kleur

Het is ook mogelijk om een gedeeltelijk transparante achtergrondkleur in te stellen. Meer hierover lees je in deze tutorial.