I've searched a lot on the web but I cannot find a cross browser solution to fade a css backgrund image to greyscale and back.
The only working solution is to apply CSS3 filter greyscale:
-webkit-filter: grayscale(100%);
but this works just with Chrome v.15+ and Safari v.6+
(as you can see here: http://css3.bradshawenterprises.com/filters/)
Many pages online speaks about this solution to grey out elements:
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 10+, Firefox on Android */
filter: gray; /* IE6-9 */
(as you can see here:http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)
But actually it does not seem to work for css background images, as the webkit filter do.
Are there any solution (maybe with jquery?) to hack this lack of support for filter on less advanced browsers?
Best Answer
Here you go:
Tested it in FireFox, Chrome and IE. I've also attached an image to show my results of my implementation of this.
EDIT: Also, if you want the image to just toggle back and forth with jQuery, here's the page source for that...I've included the web link to jQuery and and image that's online so you should just be able to copy/paste to test it out:
EDIT 2 (For IE10-11 Users): The solution above will not work with the changes Microsoft has made to the browser as of late, so here's an updated solution that will allow you to grayscale (or desaturate) your images.