jQuery pixelate image effect – pixelate.js

Pixelating an image using jQuery pixelate image plugin – a little bit of fun with JavaScript and HTML5 Canvas. The original image will appear on mouse over.

jQuery pixelate image with pixelate.js plugin

It’s a simple library and jQuery plugin to pixelate any set of images, and optionally reveal them on hover.

pixelate.js - jQuery pixelate image effect
pixelate.js – jQuery pixelate image effect


pixelate.js can be used with or without jQuery:

// following two lines are near identical

We can also use HTML5 data attributes:

<img src="test.jpg" width="200" height="200" data-pixelate>


value – the percentage of pixelation to perform, a value between 0 and 1

reveal – reveal the image on hover and remain revealed if clicked

revealonclick – reveal the image on click. When combined with reveal, it will remain revealed after being clicked.

These options may be specified by data tags, e.g.:

<img src="img.jpg" data-pixelate data-value="0.5" data-reveal="false">

or JS:

$('img#myimage').pixelate({ value: 0.5, reveal: false });

License: MIT





You may also like:

Beautiful and realistic JavaScript raindrops effect – Rainyday.js

jQuery smoke effects – Audero Smoke Effect plugin

Have fun!