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 id="button3"></div><div id="button4"></div><div id="button5"></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;
    cursor: pointer;
}

.highlighted {
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    background-color: red;
    border: 2px solid black;
    opacity: 0.7;
}

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

#button2 {
    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);
    });
    $('div div').click(function(){
        $(this).toggleClass('highlighted');
    });
});