JSFiddle - React, Tailwind, and code Playground

by Brian Chang

HTML

<div><img src="https://drive.google.com/uc?export=download&id=0B_2mQwhMw6g2LXVkS2NQblBpMkk"><div id="button1"></div><div id="button2"></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;
}

#button1 {
    margin-top:  -150px;
}

#button2 {
    margin-top:  -120px;
}

JavaScript

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