JSFiddle - React, Tailwind, and code Playground

by Tiago Sousa

HTML

<div class="thumb">
    <div class="thumbImage">
        <img src="http://placehold.it/350x150" />
        <div class="hover">
            <p>Conteudo Hover</p>
        </div>
    </div>
</div>

CSS

.thumbImage {
    position: relative;
    display: inline-block;
}
.thumbImage:hover .hover {
    display: block;
}
.thumbImage .hover {
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}