How to Create the Perfect Image Crossfade with CSS3 Transitions

CSS3 Image Crossfade Tutorial

This is a quick and easy lesson in how to set up an image crossfade using only CSS to accomplish the task. It’s a very nice aesthetic and it only takes a few minutes to set up.

The classic crossfade transition is a longtime favorite in the worlds of film, video and photography. And now it can be something that is easily added through CSS to any website or app. First, you need at least two images to crossfade between and then the rest is just simple coding.

<div id="crossfade">
    <img class="bottom" src="images/YourImage.jpg" />
    <img class="top" src="images/YourImage.jpg" />

#crossfade {
#crossfade img {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;    
    transition: opacity 1s ease-in-out;

#crossfade {

As you can see, first two images were identified under a <div id></div> and then the #crossfade selector is used to endure the proper layout. A second selector of #crossfade image then sets the opacity to 100% and also adresses browser compatibility and support of the transitions. The last bit of code needed is the #crossfade img. top: hover declaration setting the opacity to 0% upon hover.

And there you have it. A nice image crossfade every time. You may also find interest in this CSS Basics tutorial on using selectors properly. If you have a tutorial request or wish to share one of your own, please send us a message letting us know.

One thought on “How to Create the Perfect Image Crossfade with CSS3 Transitionsadd yours
  1. Pingback: CSS3 Keyframe Animations - iPhone Wiggle Effect

Leave a reply
this will never be published