Images from grayscale into colour when hovering

What is the entirety of the CSS that isn’t working?

The image is in color so, I don’t know exactly why…

https://91.216.241.2/~cmgiie/ (the logos on the bottom of the page)

Now it works on Chrome but not in Firefox (or Explorer). Any idea of why?

Thanks very much!

Sounds like you need to clear your browser’s cache.

Unless you’re viewing it in an old version if IE, are you using a new version (newer than IE8)? If so then press F12 and make sure you’re not in compatibility mode.

This blog post from May 25, 2012 shows that only Chrome support filters as of now. https://www.html5rocks.com/en/tutorials/filters/understanding-css/#toc-availability

(not affiliated with this site)

I did it to my site and it only grayscaled in Chrome.

Thanks, Andrew and ModularBase.

I’ve cleaned the cache already and nothing. I’m using Explorer 10 by the way.

I think it’s only going to work in Chrome as you said.

Hi!
It works on Chrome (with transition) and Firefox (without transition) and Safari for Mac (not for Windows), but not working on Explorer 10 (used to work on 6-9…) unless you use SVG images https://jsfiddle.net/KDtAX/105/

There is a way to force Explorer 10 to render the page with Explorer 9 by adding <meta http-equiv="x-ua-compatible" content="IE=9"> between the head tags in the header.php as it says in https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx it worked for me ??

asdevargas:

Thanks very much for comments.

At the moment, I managed to make it work in Chrome but not in Firefox. About the svg images, should I submit one in grayscale and one in color?

Thanks,
Maria

Hi Maria,

I had to update Firefox to the latest version, it seems that on previous one it doesn’t work… As for the SVG I didn’t try it, I just added the code above between the head tags of the header, but as far as I understand you don’t need to submit two images.
Hope it helped a little…