Is there a way to display an image in grayscale when it first loads, and then show its original colors when the user hovers over it?
I attempted the following code, which works in Chrome but not in IE:
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 assist me in resolving this issue in IE browser.
Thank you for your help.