JSFiddle - React, Tailwind, and code Playground

by ddhboy

HTML

<img src="http://www.inserthtml.com/wp-content/uploads/2012/06/f1.jpg" alt="example">

CSS

img { /* Universal settings */
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -ms-transition:all .4s;
    -o-transition:all .4s;
    transition:all .4s;
}
img:not(:hover) {
  -webkit-filter:grayscale(100%);
    -moz-filter:greyscale(100%);
    -ms-filter:greyscale(100%);
    -o-filter:greyscale(100%);
    filter:grayscale(100%);
}
img:hover {
    -webkit-filter:greyscale(0%);
    -moz-filter:greyscale(0%);
    -ms-filter:greyscale(0%);
    -o-filter:greyscale(0%);
    filter:greyscale(0%);
}