JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grid-source"><img src="http://www.google.com/images/logos/ps_logo2.png"></div>

CSS

#grid-source { position: absolute; }
#grid-overlay { position: relative; }

.hover { background-color: rgba(0,0,0,0.1) !important; }
.unselected { background-color: rgba(0,0,0,0.5); }
.selected { background-color: none; }

JavaScript

var $src = $('#grid-source');
var $wrap = $('<div id="grid-overlay"></div>');
var $gsize = 10;

var $cols = Math.ceil($src.find('img').innerWidth() / $gsize);
var $rows = Math.ceil($src.find('img').innerHeight() / $gsize);

// create overlay
var $tbl = $('<table></table>');
for (var y = 1; y <= $rows; y++) {
    var $tr = $('<tr></tr>');
    for (var x = 1; x <= $cols; x++) {
        var $td = $('<td></td>');
        $td.css('width', $gsize+'px').css('height', $gsize+'px');
        $td.addClass('unselected');
        $tr.append($td);
    }
    $tbl.append($tr);
}
$src.css('width', $cols*$gsize+'px').css('height', $rows*$gsize+'px')

// attach overlay
$wrap.append($tbl);
$src.after($wrap);

$('#grid-overlay td').hover(function() {
    $(this).toggleClass('hover');
});

$('#grid-overlay td').click(function() {
    $(this).toggleClass('selected').toggleClass('unselected');
});