A jQuery plugin that replaces default mouse hovers with image crossfade hovers
Switch branches/tags
Nothing to show
Clone or download
Latest commit c2c2076 Feb 17, 2012
Failed to load latest commit information.
example Init Feb 17, 2012
js Init Feb 17, 2012
LICENSE Init Feb 17, 2012
README.md Init Feb 17, 2012


jQuery HoverCrossfade

A jQuery plugin that replaces the default CSS mouse hover with an image crossfade hover

The HoverCrossfade plugin for jQuery is made for changing default hover effects of links or buttons. It's based on the "background-image" attribute and simply crossfades between two images. When applying the plugin to an element, two additional containers are created in order to make the effect work. One container contains the hover image while the other element acts as clickable area. You can set the delays for fading in and out in the options of the plugin. The plugin was made under the condition that if JavaScript is turned off, the usual CSS hover effects will show up.


Click here for a live demonstration.


Just load the file "jquery.hovercrossfade.js" together with the jQuery library. You can apply the crossfade effect to any item you want.


In order to make the crossfade plugin work, target elements need to have some certain attributes. An example for a link:

#element {
	position: relative;
	width: 200px;
	height: 46px;
	padding: 24px 0 0 0;
	background-image: url(background_sprite.png);
	background-repeat: no-repeat;
	background-position: 0 0;

#element:hover {
	background-position: 0 -70px;

It's important that your target elements do have these attributes (except "padding" which is optional but supported). The plugin is based on "background-position" so your button background has to be a sprite. Take a look at the live demo to see a proper setup.


 * HoverCrossfade plugin usage
 * @param Array normalBackgroundPositions List of the source background positions
 * @param Array hoverBackgroundPositions List of the target background positions
 * @param Number fadeInTime Delay for fading hover image in (default 300)
 * @param Number fadeOutTime Delay for fading hover image out (default 600)

	normalBackgroundPositions: [],
	hoverBackgroundPositions: [],
	fadeInTime: 300,
	fadeOutTime: 600


<a href="#" id="element1">Link text</a>
<a href="#" id="element2">Link text</a>

	// Activate HoverCrossfade plugin for one element

		normalBackgroundPositions: ["0 0"],
		hoverBackgroundPositions: ["0 -70px"],
		fadeInTime: 150,
		fadeOutTime: 350

	// Activate HoverCrossfade plugin for more elements

	$("#element1, #element2").hoverCrossfade({
		normalBackgroundPositions: ["0 0", "0 0"],
		hoverBackgroundPositions: ["0 -70px", "0 -45px"],
		fadeInTime: 150,
		fadeOutTime: 350



Normally this kind of effect should be a task for CSS3. But currently it's not possible to achieve a crossfade effect for background images. Only solid background colors can be crossfaded in CSS3. I will update the example page of this plugin when a proper CSS3 solution is possible.


HoverCrossfade is released under the MIT license.