Hover effect in Firefox & IE - css

Question

So, I have code for hover effect on picture. It works fine on Chrome, but problem is when I open site on Firefox. Here is code:
img.img-responsive {
/* for Webkit browsere, Chrome 19+, Safari 6+ ... */
-webkit-filter: grayscale(1);
/* this is for Firefox 3.5+, Firefox mobile */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'gs\'><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>#gs");
/* for IE6+ */
filter: gray;
}
img.img-responsive:hover {
/* for Webkit browsere, Chrome 19+, Safari 6+ ... */
-webkit-filter: grayscale(0);
/* this is for Firefox 3.5+, Firefox mobile */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'gs\'><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>#gs");
/* for IE6+ */
filter: gray;
}
So, what should I do that hover effect works on Firefox? Pictures are shown in black-white and when you hover them color should appear.

Answer 1

filter: grayscale(100%) /* Or lower */
should work in a latest version of Firefox. But then again, this is Firefox.
If it doesn't, try replacing your 'filter' url with 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"); /* Firefox 3.5+ */
By the way, a simple Google search for "Firefox Grayscale" turned out a StackOverflow reply to your question. It was answered by defau1t a while ago:
CSS Filter not working in Firefox

Answer 2

thanks for help but this didn't solve my problem. Either your answers works for me. Now hover effect works only in one solution, picture is now in color and when I hover it it becomes black-white. I need opposite, picture has to be black-white and when I hover it, it has to be in color.

Answer 3

The filter effect you are using for Firefox seems to be very convoluted. All modern browsers should be able to use the CSS3 notation now, but specific selectors for slightly older browsers are available;
You might need to use the -moz selector for your version of Firefox.
The full list for all browsers is below;
img {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
}
img:hover {
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
}
Hope this helps.

Answer 4

try JS fix
It is using javascript to detect the browser and creates a canvas and then uses filter.
http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/