jQuery image grid effect

Question

I have an image sitting on a page that I want to create a grid type overlay (that covers the image with a black fill) which will be partitioned into 50x50 pixels (what ever size, tbh) squares.

The squares on the grid will then flip over, one at a time, in random positions revealing the image below it.

The only way I can think of accomplishing this would be to create a whole bunch of grid squares and overlay them on the image with jQuery, then flip each image square individually. This, though, would be a pain in the ass. Doing this all dynamically in jQuery is what I'm hoping to accomplish.

Any ideas?

Answer 1

You can create grid squares in a loop using jQuery like this:

var gridContainer = $('<div class="GridContainer"></div>')
    .width(yourImage.width())
    .height(yourImage.height());
for(var i = 0; i < squareCount; i++) {
    gridContainer.append($('<div class="GridCell"></div>'));
}