JSFiddle - React, Tailwind, and code Playground

HTML

<div class="some_block">
    <img src="http://www.catsaroundtheglobe.com/wp-content/uploads/lil_bub_the_cat-250x250.jpg" alt="">
    <div class="overlay">some text</div>
</div>

CSS

.some_block{
    position:relative;
    display:inline-block;
}
.overlay{
    display:none;
    background:rgba(204,204,204,.5);
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    
    color:#fff;
    text-align:center;
}
.some_block:hover .overlay{
    display:block;
    margin:20px;
}