Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
Want to create more interactive emails? The concept of interactive emails might sound a little intimidating at first. But if you start with something simple—like CSS hover effects—you'll be on the right track.
Want to learn how to use a rollover effect in emails? Then you're in luck!
My good friend and email freak Nout Boctor-Smith has joined me as the very first guest in the new web series of Email on AcidNotes from the developer: Video Edition. She walked us through a quick tutorial on how to use a CSS hover effect to turn images on rollover.
What are developer notes?
The Email on Acid website has been providing helpful resources on email development for over a decade. Many of the email developer guides 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 present Notes from the Dev: Video Edition, hosted by Megan Boshuyzen (that's me), an extension of my monthly column found in the Email on Acid newsletter.
Keep an eye on this blog and subscribe to the Email on Acid YouTube channel for the latest installment. Each episode features email experts who will show you how to fix common email problems or experiment with innovative inbox ideas.
Watch Episode 1 with Nout Boctor-Smith
(Visit our Resource Center to view the full transcript of this episode.)
Nout Boctor-Smith
I was thrilled to invite Nout as my very first guest on the show. Not only is she a good friend of mine, but she is also a key activist in the email community.
If you're part of the Email Geeks Slack, you've probably seen her before, as she's one of the group's admins. Of course, Nout has a day job too. Previously, she was Senior Manager of Lifecycle Marketing at LaunchDarkly. Nout has since branched out on her own, and you can find out more about what she does by visiting Nine Lives Digital.
Nout was also a featured expert in our webinar on optimizing the email experience, which also featured Guilda Hilaire and Shannon Crabill.
In this tutorial on using hover effects in an HTML email, Nout used a campaign she developed for a virtual GitLab event. We discovered how this hero image changes when a subscriber's cursor hovers over it. This is called a rollover image.
What is a rollover image?
A rollover image is as simple as it sounds. It is a secondary graphic that appears when someone hovers 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 regularly in their inboxes, so it makes your campaign more memorable and could increase email engagement.
Try the rollover image effect for yourself below:
How to encode rollover images in emails
To put it simply, we add code that makes the main image disappear on hover and reveals a second, alternative image. To achieve this, you can use the CSS class “to turn around” And :hover as a CSS pseudo class.
Here is the code snippet that Nout used:
In the code above, you will notice that the two images are embedded in a link and the maximum height of the alternate image is set to 0px. This is because we want to hide the image until the recipient's mouse pointer hovers over the main image.
A separate
