Fade One Image Into Another

  • follow us in feedly
Published March 11, 2013 by Brad Knutson
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.


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.


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.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

8 thoughts on “Fade One Image Into Another

  1. johnny_n

    This is really nice… very simple.

    You’re missing one critical part onscreen in the jQuery HTML above (looked at your source to find it) — the background image style ( style=”background-image: url(‘ path/to/image’); height: ___px; width: ___px;”).

    1. Brad Knutson Post author

      Yes – I apologize, I left the CSS out of the jQuery example. I’m glad you knew that you could view the source or inspect the elements in the example to find what you were looking for though :)

    1. Alex

      I made the CSS version. In the first section, I added my padding top and left but when I do, It repeats the back image.

    2. Brad Knutson Post author

      Ah I see what you are referring to. If you add margin to the #cssfade element it should work as you intend it to.

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">