JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bw pic">
    <a href="http://www.flickr.com/example"><img class="wp-image-998 alignnone" title="Example" alt="Example" src="http://placekitten.com/550/386" width="550" height="386" /></a>
</div>

CSS

::-moz-selection {
    background-color: #888;
    color: #fff;
}
::selection {
    background-color: #888;
    color: #fff;
}
/*B&W*/
 .bw {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.bw:hover {
    -webkit-filter: grayscale(100%);
    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");
}
.pic {
    float: left;
    margin: 20px;
    overflow: hidden;
}