Grayscale color not working in IE 11 Browser

Question

I want show an image in gray color when it's loaded, when user hover on the image it should show original color of image.

i tried below code, it's working in chrome browser, but not working in IE Browser

CSS code :

.testImage img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    transition: filter 600ms ease;
    -webkit-transition: -webkit-filter 600ms ease;
    -o-transition: filter 600ms ease;
    -moz-transition: filter 600ms ease;
    -ms-transition: filter 600ms ease;

}

.testImage img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);   
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
}

<div class="testImage">   

<img title="Sample Title" src="http://www.w3schools.com/html/pic_mountain.jpg">
    
</div>

JSFiddle Link : https://jsfiddle.net/samalaraj72/ehu77xy7/1/

please help me how to fix this issue in IE Browser,

Thanks in advance.

Answer 1

Try this

testImage img: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");
}