JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div></div>
	</body>

CSS

div{
width: 200px;
height: 200px;
background:url('http://www.online-image-editor.com/styles/2013/images/example_image.png');
position: relative;
}

div:hover{
opacity:0.8;
-moz-opacity:0.8;
filter: grayscale(1);
-khtml-opacity: 0.8;
background-color:#000;
linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ),
}
div:hover:after{
display:none;
}