Crossfade Between BG Images On Hover - jQuery HoverCrossfade

HoverCrossfade is a jQuery hover effect plugin that makes it possible to smoothly crossfade between two images when hovering over a button or link element.

This is done by altering the position of the background image (typically an image sprite) of your button or link element and then adjusting the opacity of that background image using the jQuery animate() method.

How to use it:

1. Add a background image to the button or link element.

<a href="#" id="button">Hover Me</a>
<!-- OR -->
<button id="button">Hover Me</button>

#button1 {
  /* button styles here */
  position:relative;
  background-image:url(bg.png);
  background-repeat:no-repeat;
  background-position:0 0;
}

/* change the bg position when JS is disabled (OPTIONAL) */
#button:hover {
  background-position:0 -70px;
}

2. Insert the jquery.hovercrossfade.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.hovercrossfade.js"></script>

3. Call the plugin on the target element and set the position of the background image.

$("#button").hoverCrossfade({

  // initial position
  normalBackgroundPositions: ["0 0", "0 0"],

  // on-hover position
  hoverBackgroundPositions: ["0 -70px", "0 -45px"],

});

4. Determining how long the crossfade transition will run.

$("#button").hoverCrossfade({

  // initial position
  normalBackgroundPositions: ["0 0", "0 0"],

  // on-hover position
  hoverBackgroundPositions: ["0 -70px", "0 -45px"],

  fadeInTime: 300,
  fadeOutTime: 600,

});

---

This awesome jQuery plugin is developed by matthias-schuetz. For more Advanced Usages, please check the demo page or visit the official website.