Cross-browser gråtoning af billeder med CSS

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

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.