JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<div class="b">
    <div class="c">
        <div class="a" style="">
            Apple
            <div class="d">Green</div>
        </div>
    </div>
    <div class="c">
        <div class="a" style="">
            Banana
            <div class="d">Yellow</div>
        </div>
    </div>
    <div class="c">
        <div class="a" style="">
            Cherry
            <div class="d">Red</div>
        </div>
    </div>
</div>

SCSS

.a {
    width:5em;
    height:5em;
    padding:1em;
    margin:1em;
    border:1px solid black;
    position:absolute;
    top:-50%;
    left:-50%;
    background-color:white;
}
.d {
    visibility:hidden;
}
.a:hover {
    zoom:2;
    z-index:1;
}
.a:hover .d {
    visibility:visible;
}
.c {
    position:relative;
    background-color:red;
    width:5em;
    height:5em;
    float:left;
}