How can I get my CSS code to work on Firefox and IE

Question

I have an image hover from grey-scale to color, site wide for all images in my site. It works perfect in Safari and Google, but in Firefox and Internet Explorer it is not working at all. Here is the code:

img {
  -webkit-filter: grayscale(100%); /* For Webkit browsers */
  -webkit-transition: .5s ease-in-out; /* For Webkit browsers */
  -moz-filter: grayscale(100%); /* For Firefox */
  -moz-transition: .5s ease-in-out; /* For FireFox */
  -o-filter: grayscale(100%);
  -o-transition: .5s ease-in-out;
} 

img:hover {
  -webkit-filter: grayscale(0%); /* For Webkit browsers */
  -webkit-transition: .5s ease-in-out; /* For Webkit browsers */
  -moz-filter: grayscale(0%); /* For Firefox */
  -moz-transition: .5s ease-in-out; /* For Firefox */
  -o-filter: grayscale(0%); 
  -o-transition: .5s ease-in-out;
}

I am sure it is something simple, but not sure what. Thanks, Autum

score 2 · Answer 1 · answered Apr 20 '17 at 21:06

2

Firefox may have deprecated the vendor prefixes, and there is no prefix there for IE. Try this:

img {
    filter: grayscale(100%); /* For modern browsers */
    transition: .5s ease-in-out; /* For modern browsers */
    -webkit-filter: grayscale(100%); /* For Webkit browsers */
    -webkit-transition: .5s ease-in-out; /* For Webkit browsers */
    -o-filter: grayscale(100%); /* For Opera */
    -o-transition: .5s ease-in-out; /* For Opera */
} 

img:hover {
    filter: grayscale(0%); /* For modern browsers */
    transition: .5s ease-in-out; /* For modern browsers */
    -webkit-filter: grayscale(0%); /* For Webkit browsers */
    -webkit-transition: .5s ease-in-out; /* For Webkit browsers */
    -o-filter: grayscale(0%); /* For Opera */
    -o-transition: .5s ease-in-out; /* For Opera */
}

answered Apr 20 '17 at 21:06

danwellman

9,068
8
60
88

Thank you, it is now working in Firefox, but no luck with IE. – Autum Brown Apr 21 '17 at 17:01
Ok, one down, one to go. Which version of IE? – danwellman Apr 21 '17 at 17:09
Actually, I don't suppose the version matters - IE does not support CSS filters in any version, http://caniuse.com/#feat=css-filters You could try a JavaScript solution, such as outlined here: http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html – danwellman Apr 21 '17 at 17:19

score -1 · Answer 2 · answered Apr 20 '17 at 21:41

-1

Also - because this is how it is in my code - try adding these filter transitions for Internet Explorer:

-ms-filter: grayscale(100%);
-ms-transition: .5s ease-in-out;

-ms-filter: grayscale(0);
-ms-transition: .5s ease-in-out

Adding those in should add support for IE; these transitions and filters were just tested successfully in Microsoft Edge, which I'm guessing should use identical prefixes to IE.

answered Apr 20 '17 at 21:41

TCharb

444
1
6
15

That is not how vendor prefixes work. You can't slap -ms- on just everything to get it to work. – Mr Lister Apr 21 '17 at 08:23
Well, I didn't "slap it on." The -ms- prefix was tested in the Edge browser, and given that IE and Edge are both Microsoft products, would they not utilize the same vendor prefix? The hover effect worked. – TCharb Apr 21 '17 at 14:25
@Mr Lister I'm definitely not trying to start a fight here, I'm just going off of my own understanding of the prefixes. There is an article from Microsoft Developer Network (https://msdn.microsoft.com/en-us/library/ms530752(v=vs.85).aspx) that describes the existence of the -ms-filter prefix. However, in conjunction with what you're saying, this feature was deprecated in IE 9, and removed in IE 10. However, if OP wants to retain legacy support for older browser versions, it may be worth considering. As far as transition goes though, I am unsure. Just throwing that out there! – TCharb Apr 21 '17 at 17:30
I'd forgotten about that one. Sorry. But that was another property altogether, which had nothing to do with the standard `filter` and should not be used as an alias to it. – Mr Lister Apr 21 '17 at 18:11

How can I get my CSS code to work on Firefox and IE

2 Answers2