JSFiddle - React, Tailwind, and code Playground

HTML

<a href=""><img src="images/portfolio/img8.jpg" alt=""><span>Description</span></a>

CSS

a{position:relative;}

img {
    width: 206px;
    height: 121px;
    position: relative;
}
img~span {
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    display:block;
    opacity:0;
    width: 190px;
    position: absolute;
    padding: 5px 8px;
    bottom: 0px;
    text-align: left;
    font-size: 13px;
}
a:hover span {
    opacity:1;
    -webkit-transition: opacity 1s ease-out 0.5s;
     -moz-transition: opacity 1s ease-out 0.5s;
     -o-transition: opacity 1s ease-out 0.5s;
     transition: opacity 1s ease-out 0.5s;
}