JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <img src="http://www.fullhdoboi.com/wallpapers/thumbs/6/kartinka-apelsiny-1885.jpg" alt="" />
</div>

CSS

div
{
  width: 500px;
  height: 250px;
  text-align: center;
  line-height: 250px;
}

div:hover
{
  background: rgba(0,0,0,0.3) url("http://s1.iconbird.com/ico/2014/1/625/w512h5121390855587zoomin512.png") 50% 50% no-repeat;
  background-size: contain;
  cursor: pointer;
}

div:hover img
{  
  opacity: 0.5;
}

img
{
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}