36

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 ?

Cœur
  • 37,241
  • 25
  • 195
  • 267
jellobird
  • 767
  • 1
  • 7
  • 14

3 Answers3

35

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

KatieK
  • 13,586
  • 17
  • 76
  • 90
  • 1
    Is there no way of achieving this without referencing the image URL in the CSS? I'm trying to get this to work on a page with multiple images, so I suppose I could add each image to CSS in the
    ... Quite a faff but then it is IE!
     – patrickzdb Jun 18 '13 at 13:02
  • You should ask this as a brand new question. Include a link to here, but be sure to have example code (in the Q and in a jsFiddle) so that someone can understand what you're aiming at. I'm confused as to how you'd expect to reference the image at all, without using it's URL. – KatieK Jun 19 '13 at 02:02
  • 1
    in short: no, in IE, you cannot apply SVG filters to HTML images, like you can in sane browsers. – Spongman Nov 08 '13 at 20:55
23

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.

Karl Horky
  • 4,410
  • 2
  • 31
  • 35
  • 3
    This indeed s the best grayscale JS plugin I came across and I tried about 5, good job! – Karolis Ramanauskas Apr 18 '14 at 08:12
  • All the way from 2015, **thank you**! This plugin is a life-saver, I've been trawling the internet for the past two days looking for exactly this type of solution. *Thank you!* – Singular1ty Aug 05 '15 at 02:08
  • You are a life saver. Worked perfectly. Thank you very much. – Aditya Apr 12 '17 at 16:38
  • No problem, nice that I could help! – Karl Horky Apr 13 '17 at 14:07
  • Hi Karlhorky Sir, I tried every thing but it did not worked at all in i.e 10, 11. I did every thing for top banner but its not grayscale even image not shows up. I see svg tag in the browser inspect but no image can you see it for me plzzzz – Vaibhav Oct 01 '19 at 10:15
5

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
    }
});
Powerriegel
  • 595
  • 5
  • 16
  • Links to a tool or library [must be accompanied by usage notes, a specific explanation of how the linked resource is applicable to the problem, and some sample code](//meta.stackoverflow.com/a/251605/584192). – Samuel Liew Aug 09 '19 at 04:15