CSS - Grijswaarde toepassen in alle browsers


Misschien heb je het wel eens gezien, afbeeldingen of iconen die eerst grijs zijn en zodra je met de muis op de afbeelding gaat staan komt de versie in kleur in beeld. Nu was er vroeger een specifieke filter voor Internet Explorer beschikbaar om afbeeldingen grijs te maken maar dit werkte dan weer niet in andere browsers. Tegenwoordig kan een afbeelding wel eenvoudig grijs gemaakt worden en dit werkt in alle bekende browsers met uitzondering van browser Internet Explorer 10 en 11.

Het toepassen van het effect gaat middels de volgende code.

img {
        filter:url(filters.svg#grayscale);
        filter:gray;
        -webkit-filter: grayscale(100%);
}


De eerste regel in de code hierboven bevat een vermelding naar een bestand en deze is specifiek voor Firefox. Open hiervoor kladblok en plaats hierin de onderstaande code en sla dan het bestand op als filters.svg. Plaats vervolgens dit bestand op de juiste locatie.

<svg xmlns="http://www.w3.org/2000/svg">
        <filter id="grayscale">
                <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
        </filter>
</svg>


Hieronder een voorbeeld van een afbeelding waarop het effect is toegepast. Ga met de muis hieronder op de afbeelding staan om de afbeelding in kleur te bekijken.

Het instellen van de mouse-over gaat op de volgende manier.

img:hover {
        filter:none;
        -webkit-filter:none;
}