hole cutter v1

by Nick Hulea

HTML

<div class='wrap'></div>
<!-- What this does: 1. Creates enough floated div elements to fill screen area over the top of photo 2. Assign a hover event to all created elements. 3. Find all similar elements within immediate proximity of hovered over element. 4. Now we set opacity on all these 5. Hover-out we set opacity back to 100% -->

CSS

.wrap {
 position:absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 background: url(http://www.lcmh.com/upload/images/family.jpg) no-repeat;
 
 background-size: 100% 100%;
 overflow:hidden;
}
.shit {
  width: 50px;
  height: 50px;
  left: 0;
  top: 0;
  background: red;
  float:left;
}

p {
  position:absolute;
  background: white;
}

JavaScript

// 60x60 squares
var pagewidth = $(document).width();
var pageheight = $(document).height();

var topmid;
var topleft;
var midleft;
var botleft;
var botmid;
var botright;
var midright;
var topright;
for (var i = 0; i < (pagewidth / 56) * (pageheight / 56); i++) {
    $(".wrap").append("<div class='shit'></div>");
}

$(".shit").hover(function () {
    var top = $(this).position().top;
    var left = $(this).position().left;

    topmid = document.elementFromPoint(left, top - 60);
    topleft = document.elementFromPoint(left - 60, top - 60);
    midleft = document.elementFromPoint(left - 60, top);
    botleft = document.elementFromPoint(left - 60, top + 60);
    botmid = document.elementFromPoint(left, top + 60);
    botright = document.elementFromPoint(left + 60, top + 60);
    midright = document.elementFromPoint(left + 60, top);
    topright = document.elementFromPoint(left + 60, top - 60);

    $(this).css({
        'opacity': '0'
    });
    $(topmid).css({
        'opacity': '0'
    });
    $(topleft).css({
        'opacity': '0'
    });
    $(midleft).css({
        'opacity': '0'
    });
    $(botleft).css({
        'opacity': '0'
    });
    $(botmid).css({
        'opacity': '0'
    });
    $(botright).css({
        'opacity': '0'
    });
    $(midright).css({
        'opacity': '0'
    });
    $(topright).css({
        'opacity': '0'
    });

}, function () {
    $(this).css({
        'opacity': '1'
    });
    $(topmid).css({
        'opacity': '1'
    });
    $(topleft).css({
        'opacity': '1'
    });
    $(midleft).css({
        'opacity': '1'
    });
    $(botleft).css({
        'opacity': '1'
    });
    $(botmid).css({
        'opacity': '1'
    });
    $(botright).css({
        'opacity': '1'
    });
    $(midright).css({
        'opacity': '1'
    });
    $(topright).css({
        'opacity': '1'
    });

});