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.
hover mouse over the image to see the original version
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.
hover mouse over the image to see the original version
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.
hover mouse over the original image to see the blur effect below
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.
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.
Hoverizr by Ilias Iovis is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.