filter:grayscale(100%) in IE 11 for images

Question

I have searched all over the internet but I didn't get any solution.

Can anyone say what is the alternative for the css3 filter and for transistion3d in IE 11 and IE 12?

I don't want to use any Plugins.

Not for SVG i want for <img> tag

Answer 1

Since filter is not supported with IE11 - there is ie hacks like this However it would have to include a lot of JS seen here which would mean writing browser detection in JS and more. -

Answer 2

You could try to add two kinds of images, one is the original image and another is a grayscale image. Then, using div to display these images. like this:

<style>
    .grayscale {
        background-image: url('images/Image1.jpg');
        background-size: cover; /* <------ */
        background-repeat: no-repeat;
        background-position: center center;
    }

        .grayscale:hover {
            background-image: url('images/imag1_gray.PNG') ;
            background-size: cover; /* <------ */
            background-repeat: no-repeat;
            background-position: center center;
        }
</style>
<div class="grayscale" style="width:500px; height:500px">
</div>

the result like this:

In my option, I prefer to use some JQuery plugin, like this.