Cross-browser gråtoning af billeder med CSS

Af

Kulturstyrelsen har et nydeligt website med gråtonede fotos, der bliver til farvefotos, når man fører musen henover.
Fra farvebillede til gråtonebillede med CSS

Her er teknikken til at opnå den effekt på tværs af Firefox 10+, Internet Explorer 6 – 9, Chrome 19+ og Safari 6+.

a img {
    filter: url("data:image/svg+xml;utf8,<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>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

Og sådan deaktiveres effekten igen, f.eks. ved :hover.

a:hover img {
    filter: none;
    -webkit-filter: grayscale(0%);
}

Mere om CSS filtre og hvordan de fungerer her.

Skriv en kommentar