How to Create the Perfect Image Crossfade with CSS3 Transitions

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" />
</div>

#crossfade {
    position:relative;
    height:250px;
    width:400px;
}
#crossfade img {
    position:absolute;
    left:0;
    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 img.top:hover {
    opacity:0;
}

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.