JSFiddle - React, Tailwind, and code Playground

HTML

<div class="data">
    <img src="http://scontent-a-dfw.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10809512_341410899374744_4010362_n.jpg" />
    <div class="overlay"></div>
</div>

CSS

.data {
    width: 95%;
    margin: auto;
    position: relative;
}
img {
    width: 100%;
    vertical-align: top;
}
.overlay {
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
}
.data:hover .overlay {
    background: rgba(0, 0, 0, .5);
}