JSFiddle - React, Tailwind, and code Playground

HTML

<div id="w">
    <img id="i" src="http://upload.wikimedia.org/wikipedia/en/3/3c/Festival-300x300.jpg" width="300" height="300" />
</div>

CSS

body { 
    background:grey;
}

#w {
    position:relative;
}

.pix {
    background:grey;
}

JavaScript

$('#w').css({
    width: $('#i').width(),
    height: $('#i').height()
});

var htmlFrag = '',
    id, ids = [],
    removePix = function () {
        if (ids.length) {
            var rand = Math.floor(Math.random()*ids.length);
            $('#'+ids[rand]).fadeOut(function(){
                $(this).remove();
            });
            ids = ids.slice(0, rand).concat(ids.slice(rand+1));
            setTimeout(removePix, 1);
        }
    };

for (var i = 0, len = $('#i').height(); i < len; i += 3) {
    for (var j = 0, len = $('#i').width(); j < len; j += 3) {
        id = 'pix'+j+'-'+i;
        ids.push(id);
        htmlFrag += '<div id="'+id+'" class="pix" ' +
                    'style="width:3px;height:3px;position:absolute;' +
                    'left:'+j+'px;top:'+i+'px;"></div>';
    }
}

$('#w').html($('#w').html() + htmlFrag);

removePix();