css3 - internet explorer 10 - howto apply grayscale filter? -

css3 - internet explorer 10 - howto apply grayscale filter? -

this css code works pretty nice net explorer until 9.

img.gray { 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"); filter: gray; -webkit-filter: grayscale(1); }

but need net explorer 10 ?

ie10 not back upwards dx filters ie9 , before have done, nor back upwards prefixed version of greyscale filter.

however, can utilize svg overlay in ie10 accomplish greyscaling. example:

img.grayscale:hover { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); } svg { background:url(http://4.bp.blogspot.com/-izpwlqy4gj0/t01cpznb1ki/aaaaaaaacga/_8uyj68qhfe/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg); }

(from: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)

simplified jsfiddle: http://jsfiddle.net/katiek/qhu7d/2/

more ie10 svg filter effects: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

internet-explorer css3 internet-explorer-10