JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img src="http://placedog.com/300/300"/>
</div>

CSS

div {
    position:relative;
    display:inline-block;
}
div:hover:after {
    content:"\A";
    width:100%;
    height:100%;
    background:rgba(255, 0, 0, 0.5);
    position:absolute;
    top:0;
    left:0;
} 
img{vertical-align:top;}