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;
width: 10px;
height: 10px;
position: absolute;
}
JavaScript
var $i = $('#i'),
$w = $('#w').css({
width: $i.width(),
height: $i.height()
}),
frag = [];
function removePix(t) {
$w.find('div').each(function() {
var $el = $(this);
setTimeout(function() {
$el.remove();
}, Math.floor(Math.random() * t));
});
};
for (var i = 0, len = $i.height(); i < len; i += 10) {
for (var j = 0, len = $i.width(); j < len; j += 10) {
frag.push('<div class="pix" style="left:' + j + 'px;top:' + i + 'px"></div>');
}
}
$w.append(frag.join(''));
removePix(2000);