JSFiddle - React, Tailwind, and code Playground

by TheNix

HTML

<figure class="item">
    <label for="toggle1" class="item__toggle"></label>
    <input id="toggle1" type="radio" name="item__togglers" class="item__check">
    <img src="http://lorempixel.com/200/200/technics" alt="">
    <figcaption class="item__caption">Hello world</figcaption>
</figure>
        
<figure class="item">
    <label for="toggle2" class="item__toggle"></label>
    <input id="toggle2" type="radio" name="item__togglers" class="item__check">
    <img src="http://lorempixel.com/200/200/technics" alt="">
    <figcaption class="item__caption">Hello world</figcaption>
</figure>

CSS

.item {
    display: inline-block;
    position: relative;
}

.item__caption {
    background: #fff;
    opacity: 0;
    position: absolute;
        bottom: 15px;
        left: 0;
}

/* TOGGLE MECHANISM */
.item__toggle {
    height: 100%;
    position: absolute;
        top: 0;
        left: 0;
    width: 100%;
}

.item__check {
    display: none;
}

/* THIS IS WHERE THE MAGIC HAPPENS */

.item:hover .item__caption,
.item__check:checked ~ .item__caption {
    opacity: 1;    
}