JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<div id="container">
<div id="cover"></div>
    <img src="http://www.google.tt/images/srpr/logo3w.png"/>
</div>

CSS

#container{
    position:relative;
}
#cover{
    position:absolute;
    overflow:hidden;
}
#cover div{
    background-color:black;
    float:left;
    width:1px;
    height:1px;
}

JavaScript

var width = $('#container img').width();
var height = $('#container img').height();
var i, j;
var cover = $('#cover');
cover.width(width);
cover.height(height);
for (j = 0; j < height; j++){
    for (i = 0; i < width; i++){
        cover.append('<div id="d-'+i+'-'+j+'"></div>')
    }
}
$('div', cover).hover(function(){
     var xy = this.id.split('-');
        $(this).css({opacity: 0});
        $('#d-'+(xy[1]-1)+'-'+(xy[2])).css({opacity: 0});
        $('#d-'+(xy[1]-1)+'-'+(xy[2]+1)).css({opacity: 0});
        $('#d-'+(xy[1]-1)+'-'+(xy[2]-1)).css({opacity: 0});
        $('#d-'+(xy[1])+'-'+(xy[2]+1)).css({opacity: 0});
        $('#d-'+(xy[1])+'-'+(xy[2]-1)).css({opacity: 0});
        $('#d-'+(xy[1]+1)+'-'+(xy[2])).css({opacity: 0});
        $('#d-'+(xy[1]+1)+'-'+(xy[2]+1)).css({opacity: 0});
        $('#d-'+(xy[1]+1)+'-'+(xy[2]-1)).css({opacity: 0});
 },
 function(){
     //$('#cover div').css({opacity: 1});
 });