JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div class="cell">
        <table><tr><td>The quick brown fox jumped over the lazy gray dog!</td></tr></table>
        <div class="overlay">
            <div class="one control">1</div>
            <div class="two control">2</div>
            <div class="three control">3</div>
            <div class="four control">4</div>
            <div class="five control">5</div>
            <div class="six control">6</div>
            <div class="seven control">7</div>
            <div class="eight control">8</div>
            <div class="nine control">9</div>
        </div>
    </div>
    <div class="cell">
        <table><tr><td>Background.</td></tr></table>
        <div class="overlay">
            <div class="one control">1</div>
            <div class="three control">3</div>
            <div class="seven control">7</div>
            <div class="eight control">8</div>
            <div class="nine control">9</div>
        </div>
    </div>
    <div class="cell">
        <table><tr><td>Background.</td></tr></table>
        <div class="overlay">
            <div class="one control">1</div>
            <div class="two control">2</div>
            <div class="four control">4</div>
            <div class="seven control">7</div>
            <div class="eight control">8</div>
        </div>
    </div>
    <div class="cell">
        <table><tr><td>Background.</td></tr></table>
        <div class="overlay">
            <div class="one control">1</div>
            <div class="three control">3</div>
            <div class="seven control">7</div>
            <div class="nine control">9</div>
        </div>
    </div>
</div>

CSS

* {
    padding: 0px;
    margin: 0px;
}

body {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #FFF;
}

#wrap {
    width: 510px;
    background-color: cyan;
}
#wrap:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

div.cell {
    position: relative;
    width: 150px;
    height: 150px;
    float: left;
    margin: 10px;
    background-color: #E7E7E7;
    background-image: url('http://blogs.ubc.ca/CourseBlogSample01/wp-content/themes/thesis/rotator/sample-1.jpg');
    overflow: hidden;
}
    div.cell table tr td {
        color: #000;
        text-align: center;
        line-height: 22px;
        vertical-align: middle;
        width: 150px;
        height: 150px;
    }
    div.cell div.overlay {
        display: none;
    }
    div.cell:hover div.overlay {
        display: block;
    }
        div.cell div.overlay div.control {
            position: absolute;
            top: 0px;
            left: 0px;
            height: 50px;
            width: 50px;
            text-align: center;
            line-height: 50px;
            background-color: pink;
            cursor: pointer;
        }
        div.cell div.overlay div.control:hover {
            text-decoration: underline;
        }
        div.cell div.overlay div.control.two {
            left: 50px;
        }
        div.cell div.overlay div.control.three {
            left: 100px;
        }
        div.cell div.overlay div.control.four {
            top: 50px;
        }
        div.cell div.overlay div.control.five {
            top: 50px;
            left: 50px;
        }
        div.cell div.overlay div.control.six {
            top: 50px;
            left: 100px;
        }
        div.cell div.overlay div.control.seven {
            top: 100px;
        }
        div.cell div.overlay div.control.eight {
            top: 100px;
            left: 50px;
        }
        div.cell div.overlay div.control.nine {
            top:...

JavaScript

$(document).ready( function() {
   
    $('#wrap div.cell div.overlay div.control').click( function() {
        if ($(this).hasClass('one')) {
            alert('1');
        }
        else if ($(this).hasClass('two')) {
            alert('2');
        }
        else if ($(this).hasClass('three')) {
            alert('3');
        }
        else if ($(this).hasClass('four')) {
            alert('4');
        }
        else if ($(this).hasClass('five')) {
            alert('5');
        }
        else if ($(this).hasClass('six')) {
            alert('6');
        }
        else if ($(this).hasClass('seven')) {
            alert('7');
        }
        else if ($(this).hasClass('eight')) {
            alert('8');
        }
        else if ($(this).hasClass('nine')) {
            alert('9');
        }
    });
    
});