Hover effect in Firefox & IE

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.

worldofjr · Answer 1 · 2014-09-16T20:06:21.260

0

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.

edited Sep 16 '14 at 20:06

answered Sep 15 '14 at 22:05

worldofjr

3,868
8
37
49

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. – Shannyn Sep 16 '14 at 20:02
In that case, change all the 0s to 1s and vice versa. I've updated my answer to reflect this. – worldofjr Sep 16 '14 at 20:08

score 0 · Answer 2 · edited May 23 '17 at 10:26

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

score 0 · Answer 3 · answered Sep 16 '14 at 19:56

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.

score 0 · Answer 4 · answered Oct 17 '14 at 13:23

0

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/

answered Oct 17 '14 at 13:23

Tusar

759
5
21

Hover effect in Firefox & IE

4 Answers4