[Code tutorial] how to utilize email marketing hover effects

The modern web experience is full of interactive elements that promote user engagement.

For years, email developers have been trying to recreate this interactivity in the beloved inbox. With HTML for email marketing stuck in the early 2000s, and every email client rendering the code slightly differently, interactivity is fairly finicky.

But have no fear!

Over the next few months, we’ll be breaking down the interactive elements you can use in email marketing, when they will and will not render correctly, potential marketing use cases, and example code you can use in your own campaigns.

Let’s start with the most simple and effective piece of interactivity to charm (most) inboxes: email marketing hover effects – specifically, hovering images and links.

Image Hover Effects

In email marketing hover effects, we’re able to emulate most CSS image hover effects by simply swapping the original image with another image on hover. From a marketing standpoint, here are a few use cases for swapping an image:

1. Displaying two different angles of a product

2. Replacing a lifestyle image with a product image

3. Black & white image to color image (or vice versa)

4. Promotion/sale unveiling (“Hover to reveal your discount!”)

5. Adding an icon or text overlay (think “Shop Now” or a magnifying glass icon)

6. Zoom in/out effects

7. Lighten or darken the image (to visually promote clickability)

Writing the code for an image rollover is pretty simple to implement thanks to Justin Khoo over at @FreshInbox. This functionality won’t work in every desktop client, but it will break nicely in the ones where it doesn’t work.

In regards to mobile clients, this method still works, but you actually need to press down on the image. This may not be an ideal mobile experience; here’s how to disable the functionality on mobile devices:
[codepen_embed height=”286″ theme_id=”0″ slug_hash=”dvmRwE” default_tab=”html,result” user=”ktrane331″][/codepen_embed]

And there you have it- a neat little trick to show alternate content on rollovers. It works in Apple Mail, Yahoo!, most versions of Gmail, and some versions of Outlook.com. In all other email clients, you’ll simply see the original image.

But images aren’t the only things to which you can apply email marketing hover effects.

Link Hover Effects

This may be a no-brainer, but when rolling over buttons or links, a slight (or drastic!) change in color and/or size immediately signals to the user that the element is clickable, boosting your click-through rates. It’s not groundbreaking stuff, but it adds a nice touch of style to your emails.

In this section, we’ll provide the CSS and HTML for two buttons and a text link.


[codepen_embed height=”265″ theme_id=”0″ slug_hash=”EWEwPP” default_tab=”html,result” user=”ktrane331″][/codepen_embed]


[codepen_embed height=”265″ theme_id=”0″ slug_hash=”xqWPVY” default_tab=”html,result” user=”ktrane331″][/codepen_embed]


[codepen_embed height=”265″ theme_id=”0″ slug_hash=”aJYLBZ” default_tab=”css,result” user=”ktrane331″][/codepen_embed]

Conclusion: Give Email Marketing Hover Effects a Try

Email marketing hover effects can have a lot of positive benefits for your campaigns. Try one or all of these techniques to improve your click-through rates.

And if you need help implementing any of this code, don’t hesitate to reach out. Our team of design experts is happy to jump into your template and insert this code for you.

More to explore…


Apple Mail Privacy Protection

What is Apple Mail Privacy Protection? Apple Mail Privacy Protection (MPP) is a feature available to Apple Mail users. MPP protects a user’s privacy by

Read More »

Media Manager upgrade

You may have noticed that your preferred browser provides a security warning for any mixed content. Recent changes in browsers such as Chrome, Firefox and

Read More »

Understanding DMARC

DMARC, or Domain-based Message Authentication, Reporting and Conformance, is an email authentication protocol that works alongside Sender Policy Framework (SPF) and DomainKeys Identified Mail (DKIM). What

Read More »

Ready to See WhatCounts in Action?

Take your first step towards supercharged engagement!

This website stores cookies on your computer. These cookies are used to improve your website experience and provide more personalized services to you, both on this website and through other media. To find out more about the cookies we use, see our Privacy Policy. We won't track your information when you visit our site. But in order to comply with your preferences, we'll have to use just one tiny cookie so that you're not asked to make this choice again.