JSFiddle - React, Tailwind, and code Playground

by Gaurav Singh

HTML

<div class="image-wrapper">Image
 <div class="stars">* * * * *</div>
 <div class="deselect">deselect</div>
</div>

CSS

.image-wrapper {
    background-color:#cccccc; 
    width: 100px;
    height: 100px;
    position: absolute;
    cursor: pointer;
}
.stars {
    color: yellow;
    position: absolute;
    bottom: -20px;
    width: 100px;
    height: 20px;
    background-color: grey;
    text-align: center;
    cursor: pointer;
}
.deselect {
    position: absolute;
    bottom:0;
    background-color: red;
    color: white;
    display: none;
    width: 100px;
    height: 20px;
    text-align: center;
}
.image-wrapper:hover .deselect {
    display: block;
}
.stars:hover + .deselect {
    display: none;
}