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.
BUTTON 1
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”EWEwPP” default_tab=”html,result” user=”ktrane331″][/codepen_embed]
BUTTON 2
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”xqWPVY” default_tab=”html,result” user=”ktrane331″][/codepen_embed]
TEXT LINK
[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.
