JSFiddle - React, Tailwind, and code Playground

HTML

<div><img src="https://drive.google.com/uc?export=download&id=0B_2mQwhMw6g2LXVkS2NQblBpMkk">
    <div id="first-child">1</div>
    <div id="nth-child">2</div><div id="button3">3</div><div id="button4">4</div><div id="button5">5</div></div>

CSS

div {
    display: table;
    width: 100%;
    border: 2px solid black;
    position: absolute;
}

img {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

div div {
    height: 27px;
    width:  120px;
    margin-left: 42px;
    border:   none;
    border-radius: 5px;
    background-color: #69D2E7;
    opacity: 0.2;
    position: absolute;
}

div #first-child {
    margin-top:  -150px;
}

div #nth-child {
    margin-top:  -121px;
}

#button3 {
    margin-top:  -92px;
}

#button4 {
    margin-top:  -63px;
}

#button5 {
    margin-top:  -34px;
}

JavaScript

$(document).ready(function(){
    $('div div').mouseenter(function(){
        $(this).fadeTo('fast', 0.5);
    });
    $('div div').mouseleave(function(){
        $(this).fadeTo('fast', 0.2)
    });
});