JSFiddle - React, Tailwind, and code Playground

by vishnu nagarajan

HTML

<div class="thumb">
<a href="url">
<p class="caption"> CAPTION</p>
<img src="http://placehold.it/300"/>
</a>
</div>

CSS

.thumb {
    background: rgba(231, 207, 0, 0.5);
    display: table;
    margin: auto;
    width: 300px;
}

.thumb img {
    display: block;
    margin: 0;
    position: absolute;
    top: 7px;
}
.thumb:hover img { opacity: 0.5; }

.caption {
    display: table-cell;
    height: 300px;
    margin: 0;
    opacity: 0;
    text-align: center;
    vertical-align: middle;
    width: 300px;
}
.thumb:hover .caption{ opacity:1;}