Fade One Image Into Another

Fading one image into another on mouseover is a common effect in today’s web development. It can be accomplished in a few ways.

jQuery

Decide on the images that you want to fade into one another. Make sure they are the same size. Create a div, and make sure that it’s the exact height and width of the two images.

Now put the below script somewhere in your document. It doesn’t really matter where because of the $(document).ready() function call, but for easier reading, place it in the header.

jQuery Example

jQuery Image Fade

You’ll notice that if you hover over the image several times quickly, jQuery actually queues the animation. If you want to prevent this, add the .stop() function immediately before the .animate() function.

CSS

You can also accomplish this with CSS. The structure and idea is exactly the same, but this one does not require javascript.

Start with a div that is styled with a background image and has a fixed height and width to match the two images.

CSS Example

CSS Image Fade

The CSS option does not queue the animation, like the jQuery version does by default. Both examples have their advantages, but if you don’t have to include the jQuery library on your site, the CSS version would be the better option.

Categories Blog