Transition effect won't take place in Mozilla FF

Question

I've got a list of thumbnails (portfolio items), which have some animation on hover. Hence, the thumbnail images become grayscale, get blurred and brighten a bit. However, I need it to be smooth, so I'm using transition, which works perfectly in Safari, Chrome and Opera, but fail in Mozilla Firefox (I'm currently testing it on Mac/FF 29).
Here is the HTML part:

<ul class="thumbnails">
        <li class="span3">
            <div class="thumbnail">
                 <a href="#gallery_1" data-toggle="lightbox">
                <img src="img/gallery/gallery_1.jpg" class="greyer" alt="">
                 </a>
                </div>
        </li>

And the CSS is as follows:

.greyer {
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  transition: all 500ms ease;
}

.greyer:hover {
-webkit-filter: grayscale(100%) brightness(140%) blur(1px);
-o-filter: grayscale(100%) brightness(140%) blur(1px);
-moz-filter: grayscale(100%) brightness(140%) blur(1px);
-ms-filter: grayscale(100%) brightness(140%) blur(1px);
filter: grayscale(100%) brightness(140%) blur(1px);
filter: url(grayblurr.svg#grayscaledBlur);
}

Thanks in advance for tips and workarounds!

`-moz-filter` is not valid. Of the filters you have FF will use `filter: url(..)` so presumably that's where the problem lies. For a grey-scale workaround how about: http://stackoverflow.com/a/12173285/246342 — Alex K., Jun 09 '14 at 12:25
Thanks for your comment Alex K., actually I've tried the solution you're mentioning, but the result is the same. My only problem in this context is to make things (animate) smoothly, which unfortunately won't happen in FF — Balabeque, Jun 09 '14 at 12:52

score 0 · Answer 1 · answered Jun 09 '14 at 12:39

I have tried it using SVG. It is not displaying grey-scale image but shows blur effect on Mozilla and in all other browser are working fine.

Here is code:

Css :

<style>
.svg-only-blur {
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  transition: all 500ms ease;
}


.svg-only-blur:hover {
-webkit-filter: grayscale(100%) brightness(140%) blur(4px);
-moz-filter: grayscale(100%) brightness(140%) blur(4px);
-o-filter: grayscale(100%) brightness(140%) blur(4px);
-ms-filter: grayscale(100%) brightness(140%) blur(4px);
filter: grayscale(100%) brightness(140%) blur(4px);
filter: url(#blur); 

}

</style>

HTML :

   <body>
<svg version="1.1"  height="0" width="0">
  <defs>
     <filter id="blur" x="0" y="0">
       <feGaussianBlur stdDeviation="3" />
     </filter>
  </defs>
</svg>  
<img src="1.jpg" class="svg-only-blur" alt="">

</body>

I hope this will help you.

Thanks for your contribution! Actually, I did used SVG in my initial code, and achieved the simultaneous grey + blur result as needed. The problem is that I want the transition go smoothly/slowly (just like it does in Chrome or Safari). In FF, the transition takes place rapidly and abruptly... — Balabeque, Jun 09 '14 at 21:51

Transition effect won't take place in Mozilla FF

1 Answers1