internet explorer 10 - how to apply grayscale filter?

internet-explorer css internet-explorer-10

121,941

Solution 1

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

Solution 2

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.

Solution 3

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

121,941

Author by

jellobird

Updated on August 09, 2020

Comments

jellobird almost 4 years

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 ?

patrickzdb almost 11 years

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 <header>... Quite a faff but then it is IE!
KatieK almost 11 years

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.
Spongman over 10 years

in short: no, in IE, you cannot apply SVG filters to HTML images, like you can in sane browsers.
Karolis Ramanauskas about 10 years

This indeed s the best grayscale JS plugin I came across and I tried about 5, good job!
Karl Horky about 10 years

Cheers, glad it helped!
Singular1ty almost 9 years

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!
Aditya about 7 years

You are a life saver. Worked perfectly. Thank you very much.
Karl Horky about 7 years

No problem, nice that I could help!
Samuel Liew almost 5 years

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.
Vaibhav over 4 years

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