Firefox: Image transition, ease out to grayscale

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/

Answers


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.


Need Your Help

Notify WatchKit app of an update without the watch app requesting it

ios watchkit apple-watch

I'm aware of the capabilities of WKInterfaceController openParentApplication and handleWatchKitExtensionRequest methods for the watch app to open the parent app and send/receive data.

PreferenceActivity with multiple PreferenceScreens without Headers

android preferenceactivity preferencescreen preferencefragment

I would like to do a normal PreferenceActivity (in the old style, without headers), but with fragments and without using addPreferencesFromResource(id) (because deprecation).