Firefox: Image transition, ease out to grayscale

Question

I have css that works in chrome, when I tested in Firefox, it will not work. Here is code:

<div class="img">
<a href="/">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/80/Knut_IMG_8095.jpg" alt="Smiley face" height="400" width="600">
</a>
</div>



img {
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    display: block;
    }

img:hover {
    -webkit-filter: grayscale(100%);
    display: block;
    }

Demo: http://jsfiddle.net/X8LQk/2/

Answer 1

You are just using -webkit-filter, for Firefox you will need SVG filter

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");

Demo

---

The only issue with this is you won't be able to transit the grey effect except for Chrome as of now, you can check the compatibility at MDN or at Can I Use for more details.