pixelate.js is a simple library and jQuery plugin to pixelate any set of images and optionally reveal them on hover. Check that by yourself.
pixelate.js can be used with or without jQuery.
// Following two lines are near identical
$('img').pixelate();
document.querySelector('img').pixelate();
Or via HTML data attributes:
<img src="test.jpg" alt="" data-pixelate />
value
The percentage of pixelation to perform, a value between0
and1
.reveal_on_hover
Reveal the image on hover.reveal_on_click
Reveal the image on click.
These options may be specified by data tags, like so:
<img src="img.jpg" alt="" data-pixelate data-value="0.5" data-reveal_on_hover="false" data-reveal_on_click="false">
or by jQuery/JavaScript:
$('#myimage').pixelate({ value: 0.5, reveal_on_hover: false, reveal_on_click: false });