JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<img src="http://i.ytimg.com/vi/BuyElctI1b4/maxresdefault.jpg" width="400" alt="cat">
</div>

CSS

div {
    display: inline-block;
    border: 2px solid black;
    position: relative;
}
div:before {
    content: " ";
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    background: rgba(0,0,0,.5);
    transition: background .4s;
}
div:hover:before {
    background: rgba(0,0,0,0);
}
img {
    display: block;
}