My CSS Image Hover Effect Does Not Work In Firefox Or Opera

So I'm using a CSS Image Hover Effect on my Wordpress website that works completely fine in Chrome, however it does not work at all in Firefox or Opera (nothing happens when I mous

Solution 1:

Still there is no Support for CSS filter on firefox, check here

But there is one workaround for grayscale on firefox use this

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

You can see the working demo here on JSFIDDLE

Solution 2:

I've never used this myself but isn't the problem that you're using a webkit filter which wouldn't be supported by firefox. I've done a quick google and it looks like you need -moz-filter: grayscale(100%); see link below.

http://pixelhunter.me/post/25782670606/css3-grayscale

Not sure if the answer below is better for compatibility with older browsers.