This script allows to add smooth grayscale hover effect, based on sprites.
In order to make the script work, the index-#.html file with a hover effect should contain these lines of HTML code in order to include jquery.slices.1.2.js script and jQuery framework:
The bottom section of the index-#.html (just before </body> closing tag) file contains these lines of code that initialize the script functionality with basic values:
The idea of the plug-in is to smoothly desaturate the image and add a link to it:
Below you can see the HTML script representation:
The HTML part is represented by a bulleted list. Note that each image is put into <a> and <span> tags in order to show the image in the default state.
You can find script related stylesheet in the main style.css file. You will need to modify the following styles: