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%); }