JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<img src="http://www.wallpapershd.biz/wallpapers/2012/12/Cardinal-Bird-1024x1280.jpg" width="500" class="transition" />

<h2 class="transition">This is a test</h2>

CSS

h2 {
    font: bold 20px Arial;
    background:gray;
    color: red;
}
img:hover, h2:hover {         
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.0\'/></filter></svg>#grayscale"); /* Firefox */
        -moz-filter: grayscale(100%);
    -moz-transition: all 1s;
}

    h2, img {           
        -moz-filter: grayscale(0);
    }

    .transition {
        -moz-transition: all 1s; /* FF */
    }