JSFiddle - React, Tailwind, and code Playground

by Hm Ba

HTML

<div class='post-body img'>
    
<img border="0" src="http://4.bp.blogspot.com/-uWKZejpPZyI/U_Ebn984Y7I/AAAAAAAAFFc/t22oSsxQbmA/s1600/polygon-wallpaper-preview-2.jpg" height="180" width="320" />

CSS

.post-body img {
    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");
 /* Firefox 3.5+ */
    filter: gray;
 /* IE6-9 */
    -webkit-filter: grayscale(100%);
 /* Chrome 19+ & Safari 6+ */;
    background:#fff;
  position:fixed;
  z-index:5;
    top:40%;
    left:40%;
}
.post-body img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    margin-top: 2px;
    background:#fff;
  position:fixed;
  z-index:5;
    top:40%;
    left:40%;
}