JSFiddle - React, Tailwind, and code Playground

HTML

<div class="photos">
    <div class="a-img">
        <img src="http://www.jamsadr.com/files/Professional/1fb60f23-00d5-4c43-a552-63321c9ed969/Presentation/HighResPhoto/Person-Donald-900x1080.jpg" width="180" height="250" />
        <div class="a-hover">sdfsdf</div>
    </div>
    <div class="a-img">
        <img src="http://www.jamsadr.com/files/Professional/1fb60f23-00d5-4c43-a552-63321c9ed969/Presentation/HighResPhoto/Person-Donald-900x1080.jpg" width="180" height="250" />
        <div class="a-hover">sdfsdf</div>
    </div>
    <div class="a-img">
        <img src="http://www.jamsadr.com/files/Professional/1fb60f23-00d5-4c43-a552-63321c9ed969/Presentation/HighResPhoto/Person-Donald-900x1080.jpg" width="180" height="250" />
        <div class="a-hover">sdfsdf</div>
    </div>
</div>

CSS

.photos .a-img {
    float: left;
    margin-left: 10px;
    position: relative;
}
.photos .a-hover {
    background-color: #f00;
    display: none;
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
}
.photos .a-img:hover .a-hover {
    display: block;
}
img {
    vertical-align: top;
}