Immagini in bianco e nero con i css

Stavo cercando una soluzione comoda ed intuitiva per gestire un effetto particolari sulle immagini da applicare sul sito di un cliente.

Il fine è quello di utilizzare delle immagini a colori che al caricamento della pagina appaiano in bianco e nero ed abbiano l’effetto di prendere i colori originali al passaggio del browser come nell’esempio qui sotto:

La soluzione per applicare questo effetto è quella di assegnare all’immagine una classe che chiameremo “scaladigrigi” e nel nostro foglio di stile andremo ad inserire il seguente codice:

Questo serve per impostare l’immagine in scala di grigi

img.scaladigrigi {
    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\'></fecolormatrix></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

Per ottenere la colorazione al passaggio del mouse andremo a scrivere invece

img.scaladigrigi:hover {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(0%);
}