Hoverizr

Home

Hoverizr is a really small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. Currently, it features three effects: grayscale, blur and color inversion. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one.

home demo image 1 - Grayscale hover mouse over the image to see the original version
home demo image 2 - Blurred hover mouse over the image to see the original version

Hoverizr takes advantage of the <canvas> element to do all the image processing.

Download

Version 1.0

Minified Version - 2.5KB: jquery.hoverizr.min.js

Developer Version - 6.3KB: jquery.hoverizr.js

Or you can download it on GitHub

Documentation

1. What it does

As said earlier, Hoverizr takes advantage of the <canvas> element's image proccessing capabilities. What this means is that Hoverizr gets info on each separate pixel of the image and proccesses it acoordingly.

Then, depending on whether you wanted the manipulated image to be above or below the original, on mouse over the top element fades out to reveal the element below.

That's not all though. Hoverizr, following the web design and development trends, is a fully responsive plugin. Meaning both the <img> and the <canvas> element will be rendered responsively depending on the browser's window width.

Give it a try and shrink this page's window and see how the effect still works with images keeping the correct aspect ratio.

Of course you can set fixed widths and heights but nowadays it is not that much recommended.

2. Installation

To run Hoverizr on your website all you have to do is include the latest jQuery version on your <head> like below (or you can save the file and set it up locally):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Then download and include the Hoverizr .js file in the same manner:

<script src="js/jquery.hoverizr.js"></script>

Finally run Hoverizr on the target <img> elements you want. It is highly suggested that you run Hoverizr after your targeted images are loaded or else you will have problems initiallizing Hoverizr if your web page is responsive and viewed in a width that the images are not displayed in their full dimensions.

So instead of running Hoverizr inside a $(document).ready(); manner, you instead initialize it as shown below - it is also recommended to hide the images by setting the css to display:none; or using the jQuery method .hide();, Hoverizr will display them again when it is finished -.

$(window).load(function() {
	$('your image/images classes or ids').hoverizr();
	});

And you are done.

3. Options

Hoverizr was built with several options in mind. The most important being the effects available

You change the setting in the initialization of the Hoverizr plugin.

$('#imageid').hoverizr({option1:"value",option2:"value"});
				

Here they are:

Option Default Values/Info
effect "grayscale" Image manipulation effect: "grayscale", "invert", "blur"
overlay "top" Manipulated image can be on "top" or "bottom"
container "overlayed" Name of the class of the generated div wrapping the img and the canvas element
width "responsive" Can be "responsive", fixed width, ex. 500 or 'inherit' from the image
height "auto" Please change the height default only if you plan to use a fixed width on your initialization
stretch "no" If you set a fixed width for image and div the image aspect ratio will not change - it will crop the image and canvas outside, if set to "yes" the image and canvas will stretch to fill the fixed width and height you chose
speedIn "slow" Speed of the fade . Can be "fast", "slow" or time in milliseconds, ex 1500
speedOut "fast" Same as speedIn for the fade in effect

Keep in mind that Hoverizr uses a z-index value of 10 for the element that is on top. In case you want something to be above Hoverizr, please use a z-index value greater than 10.

4. How it does it

First it wraps a <div> around the image/images. Then a lot of <canvas> magic and a lot of single pixel by pixel manipulation. Read the code!

5. Support/Troubleshooting/Future Features

If you have any problems with Hoverizr please do not hesitate and send me an email or look me up on Twitter

There is one major issue that might rise up. You must host your images and the page running Hoverizr on the same domain. If you use images from another domain then it will not work. Unfortunately that is not an issue I can fix but a security measure of all the modern browsers.

All major modern browsers are supported as long as they support the <canvas> element. IE 8- seem to have a problem with it but the fallback is the original image so it is all about progressive enhancement.

There are some future features on the works (disable Hoverizr when responsive and under a specified width, new transitions, noise effect etc) but because I am currently drowning in several projects, I cannot focus on further developing Hoverizr for now. Feel free to improve it yourself, you can fork Hoverizr on GitHub.

I would like to hear what you did and how you used Hoverizr, so please drop me an email!

Demos

Example 1.

The first example shows the result of the default settings of Hoverizr.

Example 1 - Grayscale, default settings Image 1 hover mouse over the image to see the original version
Example 1 - Grayscale, default settings Image 2 hover mouse over the image to see the original version
$('.ex1').hoverizr();

Example 2.

This example shows the original image and on hover you can see the blurred version Hoverizr generated below. The width and height are also fixed - this will break responsive layouts. Finally the container div name is set to "blurry" so that you can style it as you want.

Example 2 - Blur, fixed width and height, overlay below and container name set to blurry hover mouse over the original image to see the blur effect below
Example 2 - Blur, fixed width and height, overlay below and container name set to blurry hover mouse over the original image to see the blur effect below
$('.ex2').hoverizr({speedOut: 'slow',effect:"blur",overlay: "bottom",container: "blurry",width: "300",height: "150",stretch: "yes"});

Example 3.

The third example shows a simple use of the color inversion effect together with a change in speedIn for a slower fade in effect when hover is terminated.

Example 3 - Color inversion and speedIn increased hover mouse over the image to see the original version
$('#ex3').hoverizr({speedIn: 1500,effect:"invert"});

About

Credits go to Marco Lisci for his beautiful grayscale formula found in his tutorial HTML5 Canvas Image Effects: Black and White and to Matt Riggott for his idea behind using canvas to blur an image.

After releasing Hoverizr, I found out that there is another jQuery plugin that has a similar way of producing the grayscale effect. Its creator is Gianluca Guarini and you can check jQuery.BlackAndWhite on GitHub.

All images used in the examples were taken from lorempixum.com and are released under CC license from their respective owners.

Creative Commons License
Hoverizr by Ilias Iovis is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.