Inmiddels hebben we in diverse webtips al verschillende mogelijkheden van CSS besproken. Vandaag gaan we kijken naar weer een mogelijkheid van CSS: transparantie. Je kunt namelijk zonder al te veel moeite en op een simpele manier transparantie toepassen op verschillende elementen, bijvoorbeeld een plaatje. Laten we maar direct eens kijken hoe dit in zijn werk gaat! Deze webtip is cross-browser compatibel.

De CSS code

De CSS code voor het toepassen van doorzichtigheid is als volgt (dit zal een doorzichtigheid van 40% geven):

.transp {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

Op deze manier kun je natuurlijk ook een element transparatie geven zodra je er met je muis over gaat:

a:hover {
    opacity: 0.2;
    filter: alpha(opacity=20);
}

Demo

Een demo van deze webtip vind je hier.