JSFiddle - React, Tailwind, and code Playground

by Oliver Kelso

HTML

<div id="thumbs">
    <img src="http://i.imgur.com/GbfoCbC.jpg" />
    <img src="http://imgur.com/JPmNIaQ.jpg" />
    <img src="http://imgur.com/YPk968H.jpg" />
    <img src="http://i.imgur.com/XrD5R8a.jpg" />
</div>

CSS

body {
    background:#111;
}
#thumbs img {
    max-height:250px;
    border:solid 2px #CCC;
}
.grayscale {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}

JavaScript

$('#thumbs img').on('load', function () {
    $(this).stop(true, true).fadeTo(400, 0.5).addClass('grayscale');
}).on('mouseenter', function () {
    $(this).stop(true, true).fadeTo(400, 1).removeClass('grayscale');
}).on('mouseleave', function () {
    $(this).stop(true, true).fadeTo(400, 0.5).addClass('grayscale');
});