JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://www.macprime.ch/_images/idb/Steve-Jobs-Portrait.jpg"
/>

CSS

img {
    -webkit-transform: translateZ(0);
    -webkit-filter:grayscale(1);
    -webkit-filter:saturate(0%);
    -webkit-transition:2s ease;
    width:200px;
    height:200px
}
img:hover {
    -webkit-filter:grayscale(0)
}

JavaScript

// Only on Retina-Displays!

// The Image loads fuzzy, then it gets sharp as long as the transition runs and then truns back to fuzzy-mode again as soon as the transition ends… :-/

// Apply your vendor-prefix instead of -webkit if you don't have Chrome or Safari running, to keep this demo-code simple I've chosen -webkit only