JSFiddle - React, Tailwind, and code Playground

HTML

<figure style="width:400px; height: 200px;">
    <img src="http://lorempixel.com/400/200/nature/">
    <figcaption>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</figcaption>
</figure>

CSS

figure {
    position: relative;
}

figcaption {
    position: absolute;
    display: none;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: .5em;
    background-color: rgba(0,0,0,0.75);
    color: white;
}
figure:hover figcaption {
    display: block;
}