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:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  display: block;
}