JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" title="">
    <img src="http://cdn.rndimg.com/ImageStore/OilPaintingBlue/100x30_OilPaintingBlue_36fe31d84260427489aba99f7148595e.jpg" alt="" />
    <span>Some title</span>
</a>

CSS

a {
    display: block;
    width: 100px;
    height: 30px;
    position: relative;
}
span {
    position: absolute;
    font-family: sans-serif;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    text-align: center;
    line-height: 30px;
}
span:hover {
    opacity: 0.2;
}