CSS3 Animated Image Galleries: Cross-fade and Slideshow Effects

The image galleries we are about to explore descend from, and share code with, the earliest, simple, CSS gallery I introduced in this blog: a div with position: relative applied, and absolute positioning applied to images inside it. Both examples – a cross-fade and slideshow effect – use the same basic markup. In a compatible browser, mouseover each image to see an example of the associated effect. The photographs used were taken by Patrick Coin, licensed under Creative Commons.

The markup for both examples is exactly the same:

1. <div id=“gallery”>
2. <img src=“wooly-sunbonnet.jpg” alt=“Wooly Sunbonnet” />
3. <img src=“nettleleaf-sage.jpg” alt=“Nettleleaf Sage” />
4. </div>

… it is only the CSS that changes between them. Note that for both examples to work, the images must be of the exact same size. It is probably easiest to crop the images to the same dimension using PhotoShop before applying the techniques you see here.

CSS3 Cross-fade Gallery

The applied CSS:

1. div#gallery { position: relative; }
2. div#gallery img { width: 400px; height: 400px;
3. position: absolute; left: 0;
4. -webkit-transition: all 2s ease-in-out;
5. -o-transition: all 2s ease-in-out;
6. -moz-transition: all 2s ease-in-out;
7. transition: all 2s ease-in-out;  }
8. div#gallery img:hover { opacity: 0; }

Very simply, the position: relative declaration makes the div the baseline origin of any elements with position: absolute set inside it. With the second image stacked upon the first, the hover and applied transition works to cross-fade the images.

CSS3 Slideshow Gallery

The slideshow is similar, and again uses images of the same size. The containing div now has a set height and width, with any overflow hidden:

1. div#gallery, div#gallery img {
2. width: 400px; height: 400px; overflow: hidden; float: left; }
3. div#gallery img { -webkit-transition: all 2s linear;
4. -o-transition: all 2s linear;
5. -moz-transition: all 2s linear;
6. transition: all 2s linear;  }
7. div#gallery img:hover, div#gallery img:hover + img {
8. -webkit-transform: translate(0, -400px);
9. -moz-transform: translate(0, -400px);
10. -o-transform: translate(0, -400px);
11. transform: translate(0, -400px); }

The CSS is relatively straightforward: the containing div and images inside have the same qualities, so their base styles may be grouped under the first style declaration: float applied to the images removes any trace of a gap between them. Hovering over the first image moves it up 400 pixels (the height of the image) while the paired adjacent selector ensures that the next image moves in the same way, at the same time.

Note that both techniques shown here only work on pairs of images: useful for “before and after” comparisons or as an animated alternative to image swaps and CSS sprites. Transitioning a sequence of images greater than two requires more advanced code, which we will explore presently.