JSFiddle - React, Tailwind, and code Playground

by agconti

HTML

<div>
    <img src="http://placekitten.com/g/200/300" alt=""><span>Im a caption</span>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
div {
    display: inline-block;
     -webkit-transition: all 1.25s ease-out;
    -moz-transition: all 1.25s ease-out;
    transition: all 1.25s ease-out;

}
span {
    position: relative;
    bottom: 1.4em;
    display: block;
    color: white;
    background: black;
    opacity: 0;
    text-align: center;
    -webkit-transition: all 1.25s ease-out;
    -moz-transition: all 1.25s ease-out;
    transition: all 1.25s ease-out;
}
div:hover span {
    opacity: 0.7;
}