---

Want to code emails that are more interactive? The concept of interactive emails might sound a little intimidating at first. But, if you start with something simple – like CSS hover effects – you’re on the right track.

Interested in learning how to use a rollover effect in email? You’re in luck!

My good friend and fellow email geek, Nout Boctor-Smith joined me as the very first guest on Email on Acid’s new web series, Notes from the Dev: Video Edition. She walked us through a quick tutorial on how to use a CSS hover effect to make images switch on rollover.

What is Notes from the Dev?

Email on Acid’s website has been home to helpful email development resources for more than a decade. Many of the how-to guides for email developers on our blog come from members of the email geek community. (Thanks, by the way!)

We wanted to shine a spotlight on their ingenuity and creativity while sharing tips and ideas with you.

And so… we are proud to introduce Notes from the Dev: Video Edition with your host, Megan Boshuyzen (that’s me). It’s an extension of my monthly column, which you’ll find in the Email on Acid newsletter.

Keep an eye on this blog and subscribe to the Email on Acid YouTube channel to catch the latest edition. Each episode will feature email experts who’ll show you how to troubleshoot common email problems or experiment with innovative ideas for the inbox. 

Watch Episode One with Nout Boctor-Smith

(Visit our Resource Center to view the full transcription of this episode.)

I was super excited to invite Nout to be my very first guest on the show. Not only is she a good friend of mine, but she’s also a big contributor to the email community.

If you’re part of the Email Geeks Slack, you’ve probably seen her around because she’s one of the group’s admins. Of course, Nout’s got a day job too. She was previously the senior manager of lifecycle marketing at LaunchDarkly. Nout has since struck out on her own and you can find out more about what she's up to when you visit Nine Lives Digital.

Nout was also an expert panelist in our webinar on optimizing the email experience, which featured Guilda Hilaire and Shannon Crabill as well.

In this tutorial on using hover effects in an HTML email, Nout used a campaign she developed for a virtual GitLab event. We found out how to make that hero image change when a subscriber’s cursor crosses over it. That’s what’s known as a rollover image.

What’s a rollover image?

A rollover image is as simple as it sounds. It is a secondary graphic that appears when someone’s mouse rolls over a primary image.

It’s a straightforward effect that adds a fun, interactive touch to the email. A rollover image probably isn’t something your subscribers see in their inboxes on a regular basis. So, it’s going to make your campaign more memorable, and it could boost email engagement.

Check out the rollover image effect for yourself below:

How to code rollover images in emails

To put it simply, what we’re doing is including some code that makes that main hero image disappear on hover, which reveals a second, alternate image. To make that happen, you can take advantage of the CSS class “rollover” and :hover as a CSS pseudo-class.

Here’s the piece of code Nout used:

<a class="rollover" href="http://server/the-url">
  <img class="main" src="https://server/main-image.jpg" width="500" style="display:block;width:100%;">
  <img class="alt" src="https://server/alt-image.jpg" width="500" style="max-height:0px;display:block;width:100%;">
</a>

In the code above, you’ll notice the two images are wrapped in a link, and the max-height of the alt image is set to 0px. That’s because we want to hide that image until the recipient's mouse hovers over the main image.

A separate <style> section is where Nout placed the CSS that defines what happens on hover.

.rollover:hover .main{
    max-height: 0px !important;
}
.rollover:hover .alt{
    max-height: none !important;
}

There you’ll see that the max-height of the main image is now 0px while the max-height of the alternate image is none. By doing this, the main image disappears and the alternate image replaces it whenever someone's mouse interacts with the graphic.

If you haven’t watched the video yet, check it out to see this code in action.

You probably noticed that Nout also included the power of email personalization in this campaign. Nout used NiftyImages to help her create personalized graphics and pull in first names that were added to the main image.

Bonus tips on CSS hover effects in email

Nout brought up a few really good points as she walked us through the process:

1. Images should be the same size: To get this particular effect you’ll want images with the same dimensions so it looks as if the graphic changes in front of the recipient's eyes. However, there could be instances where you use different-sized images to achieve a certain effect.

2. Double the size for Retina: In order to show a high-quality image on Apple devices and 4K HD monitors, the image should be twice as large as it will be displayed in the email. So if it’s being shown at 600 pixels wide (full-width in most email templates), the image should actually have a width of 1200px.
   
3. Best for desktop: Subscribers viewing the email on a mobile device could tap and hold to see the alternate image, but it’s not exactly the experience we want. However, Nout knew that the majority of her list would open her email on desktop.

Coincidentally, Nout found some of this code on the Email on Acid blog. Check out the article How to Create Responsive Rollover Images for Email to get even more. You’ll find a couple of potential fixes if you’re having trouble getting CSS hover effects to work in Outlook and Gmail.

Your turn…

I hope you can see how easy it is to add an interactive element to your emails. There are a lot of creative ways you could use rollover effects to enhance the inbox experience:

• Show different angles of a product.
• Reveal the answer to a question.
• Reveal the punchline to a joke.
• Unveil a promo code for online shopping.
• Show an interactive before-and-after photo.
• Switch the emotion on a person’s face.
• Change CTA buttons colors on hover (just make sure to use live text for accessibility).

What are your ideas? Let us know in the comments. If you give this technique a try, tell us how it turned out.

Be on the lookout for the next episode of Notes from the Dev: Video Edition coming soon. And don’t forget to subscribe on YouTube.