JSFiddle - React, Tailwind, and code Playground

HTML

<div id='the-div'>
    Some text that will not get an overlay
</div>

CSS

#the-div {
    width: 500px;
    height: 500px;
    background: url(http://placehold.it/500x500) no-repeat center center;
    position: relative;
    color: #fff;
    z-index: 1;
}
#the-div:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255,0,0,.5);
    z-index: -1;
}