JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <img src="http://placekitten.com/200/200" />
</div>
<div>
    <img src="http://placekitten.com/200/200" />
</div>
<div>
    <img src="http://placekitten.com/200/200" />
</div>
<div>
    <img src="http://placekitten.com/200/200" />
</div>
<div>
    <img src="http://placekitten.com/200/200" />
</div>
<div>
    <img src="http://placekitten.com/200/200" />
</div>

CSS

div {
    position:relative;
    display:inline-block;
}
div:hover:after {
    content:"text text text text text text text text text text text text text text text text text text text text text text text text text text text text";
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, .5);
    border:10px solid red;
    position:absolute;
    top:0px;
    left:0px;
    display:inline-block;
    box-sizing:border-box;
    text-align:center;
    color:white;
    padding:12px;
    font-size:20px;
}