This CSS code works pretty nice for Internet 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 what do I need to do for Internet Explorer 10 ?
This question is related to
internet-explorer
css
internet-explorer-10
IE10 does not support DX filters as IE9 and earlier have done, nor does it support a prefixed version of the greyscale filter.
However, you can use an SVG overlay in IE10 to accomplish the 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 about the IE10 SVG filter effects: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx
Inline SVG can be used in IE 10 and 11 and Edge 12.
I've created a project called gray which includes a polyfill for these browsers. The polyfill switches out <img> tags with inline SVG: https://github.com/karlhorky/gray
To implement, the short version is to download the jQuery plugin at the GitHub link above and add after jQuery at the end of your body:
<script src="/js/jquery.gray.min.js"></script>
Then every image with the class grayscale will appear as gray.
<img src="/img/color.jpg" class="grayscale">
You can see a demo too if you like.
Use this jQuery plugin https://gianlucaguarini.github.io/jQuery.BlackAndWhite/
That seems to be the only one cross-browser solution. Plus it has a nice fade in and fade out effect.
$('.bwWrapper').BlackAndWhite({
hoverEffect : true, // default true
// set the path to BnWWorker.js for a superfast implementation
webworkerPath : false,
// to invert the hover effect
invertHoverEffect: false,
// this option works only on the modern browsers ( on IE lower than 9 it remains always 1)
intensity:1,
speed: { //this property could also be just speed: value for both fadeIn and fadeOut
fadeIn: 200, // 200ms for fadeIn animations
fadeOut: 800 // 800ms for fadeOut animations
},
onImageReady:function(img) {
// this callback gets executed anytime an image is converted
}
});
Source: Stackoverflow.com