Simple CSS Photo Carousel for HTML Email (Progressively Enhanced)

Hugh Roper
Sep 8, 2018 · 3 min read

Hey email designers.

At Diamond, we create a lot of email. To keep email design fun (and of course increase engagement), we’re always working to come up with new ideas, push the technical boundaries of what email can do (and avoid complexity).

Here’s a simple technique we use to add a photo carousel to HTML email. It’s progressively enhanced, which means it works great in modern email apps and defaults back to the original image in older apps like Microsoft Outlook (shudders). It’s responsive, so it looks as stunning on mobile as it does on desktop. And since you’re not using GIF, there no unsightly diffusion dither.

Make it work

In the HTML code, find the <img> tag to be replaced by a slider. Add a custom class (photo-fader) to it’s parent (usually a <div> or a <td>). If the <img> doesn’t have it’s own parent, just wrap it with a <div> tag and add the class.

<div class=”photo-fader”>
<img src=”…path to your image…” />
<div>

Find the <style> tag and add a “visibility: hidden;” CSS rule to the parent element and make the image invisible. The image is still there (it doesn’t collapse) you just can’t see it.

.photo-fader img {
visibility: hidden;
}

Use CSS to add a background image the parent <div> (or <td>) and size the image to fill the space.

.photo-fader {
background-image: url(…path to your image…);
background-size: cover;
}

Add a CSS rule (to the class above) to call a new CSS keyframe animation and animate the slideshow. New to keyframe animation? Don’t worry, it’s doesn’t bite. Start with “animation:” then “10s” which will run the animation over 10 seconds. Add the “ease-in-out” timing-function to make it smooth and “0s” to start immediately (with no delay after the page load). Follow with the trigger/animation name, “photo-fader”. End with “infinite” to tell the animation to repeat forever.

animation: 10s ease-in-out 0s photo-fader infinite;

Finish with an @keyframes CSS rule to change out the background images. Look at this code first, we’ll walk through it below.

@keyframes photo-fader {
0% { background-image: url(…path to image 1…); }
20% { background-image: url(…path to image 2…); }
40% { background-image: url(…path to image 3…); }
60% { background-image: url(…path to image 4…); }
80% { background-image: url(…path to image 5…); }
100% { background-image: url(…path to image 1…); }
}

The animation starts with your original image at 0% and displays it until 20% of the animation has run. Then at 20% it displays the second image. Actually, your browser automatically tweens the animation and creates a nice fade effect (so it displays before 20%). The animation repeats, and returns back to the original image at 100%. Repeat the original image at 100% makes the transition back to 0% seamless.

This animation uses five images and 100/5=20 so the steps are incremented in steps to 20%. If you were using four images (100/4=25) the steps would increment by 25%. Three steps would use 33.33% (100/3=33.33). Etc.

Put it all together and it just works.

HTML

<div class=”photo-fader”>
<img src=”…path to your image…” />
<div>

CSS

.photo-fader img {
visibility: hidden;
}
.photo-fader {
background-image: url(…path to your image…);
background-size: cover;
animation: 10s ease-in-out 0s photo-fader infinite;
}
@keyframes photo-fader {
0% { background-image: url(…path to image 1…); }
20% { background-image: url(…path to image 2…); }
40% { background-image: url(…path to image 3…); }
60% { background-image: url(…path to image 4…); }
80% { background-image: url(…path to image 5…); }
100% { background-image: url(…path to image 1…); }
}

Simple, responsive and progressively enhanced.

Demo

What method do you use for email photo sliders?

Hugh Roper

Written by

Art Director of @DiamondResorts award-winning design team. Email design nerd.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade