hover effect targeting opacity not working in firefox when using grayscale

Question

I'm trying to change the opacity of an image (color image with applied grayscale effect) when hovering over it.

The hover effect is not working in firefox, even though firefox seems capable of displaying different opacities in combination with the grayscale effect. This is my CSS:

    #nav_current{
        filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
        opacity: .8;    
    }

    #nav_current:hover{
        opacity: 1;
    }

I also tried using the more specific opacity:

        -webkit-opacity: 0.8;
        -moz-opacity: 0.8;
        filter:alpha(opacity=80);

But it is still not working in Firefox.

Here's the html:

<div id="nav_current" class="thumb_nav_side">
<img src="image.jpg" alt="description">
</div>

the svg:

<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 and all other `filter` attributes are webkit-only. — n1xx1, Jun 05 '13 at 21:27
@N1xx1 are your sure? because apart from the hover effect, grayscale is working in firefox — Archibald Muybridge, Jun 06 '13 at 06:38
@BorisZbarsky sry, it's not possible at the moment. i added the html in my question. — Archibald Muybridge, Jun 06 '13 at 06:41
i copied the svg from [SalmanPK](http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css) — Archibald Muybridge, Jun 06 '13 at 16:32

score 0 · Accepted Answer · answered Jun 06 '13 at 19:00

This looks like https://bugzilla.mozilla.org/show_bug.cgi?id=861042 which should be fixed in Firefox 23 (due to ship in early August). At least the behavior matches that description, and it works in Firefox nightlies starting with the one that has that bugfix.

Basically, Gecko is not invalidating on opacity change when the object also has SVG filters (or clips, for that matter) applied to it....

If you're ok with putting up with that until August, the problem will just fix itself.

hover effect targeting opacity not working in firefox when using grayscale

1 Answers1