JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="link">
<img src="http://www.cruzo.net/user/images/k/dbb025264e7d1a35772dfa4387514de9_172.jpg">
</a>

CSS

.link {
  display: inline-block;
}
.link:hover {
    background-color: rgba(0,0,0,0.3);
    background-image: url("https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/zoom_in.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}
.link:hover img{
  opacity: 0.5;
}