Notes from the Dev | Episode 1 | Rollover Image Effects with Nout Boctor-Smith

Want an easy way to add some interactivity to your next email campaign? Try adding an image rollover effect. We’ll show you how…

Notes from the Dev: Video Edition is Email on Acid’s original web series for email geeks. Every episode, someone from the email community joins Megan Boshuyzen to share their ideas and advice on coding HTML emails.

In the very first episode, Megan welcomed Nout Boctor-Smith of LaunchDarkly. Nout shows us how a couple of pieces of code can turn a static hero image into something much more fun!

Watch the episode and read the full transcript below. For more advice, show notes, and code snippets from this episode, visit our blog.

Megan [00:00] Hi. I’m Megan Boshuyzen. And you’re watching Notes from the Dev: Video Edition!

Megan [00:17] Hi. Welcome to today’s episode of Notes from the Dev. I’m Megan. And with me today is Nout Boctor-Smith, Senior Manager of Lifecycle Marketing at LaunchDarkly. Today, Nout will be talking with us about rollover effects and showing us how to get them done. How are you, Nout?

Nout [00:37] Hey, how’s it going, Megan? Doing well.

Megan [00:40] Going good. But why don’t you take it away and show us your awesome email and how you got it done?

Nout [00:47] So for this email, as you can probably tell by looking at it, it is an event, a virtual conference for the company that I used to work for. And what I was just trying to do was make it a little bit more exciting. It was during COVID and everything was kind of feeling very heavy and dark. And so we decided to like play around with the branding a little bit.

[01:15] And then also I wanted to just kind of pepper in some fun elements into this email. I was hoping that, you know, if I had fun with that, maybe my audience would as well. And so in this example, I just wanted to do something really, really simple. And I decided to go with just a hover rollover image that would swap out when you hovered over a section. And it’s really, really simple.

Nout [01:43] What I did was there are basically two images: the main image and an alternate image, and both images are wrapped in a link and that class is rollover. Then the main image class is main and the alternate is alternate. You can obviously name your classes whatever you want, but I kind of stuck with the templated code.

[02:11] It’s good to have both images be approximately the same size. You want to use two-x width when you can. So I have these images, the elements about 500 pixels wide. Ideally, your image size would be about a thousand pixels wide just to make sure it looks good on Retina displays.

Nout [02:35] So, you’re seeing the HTML here and the CSS I put in its own little style section here by itself because I am just super paranoid that Gmail is going to hate something that I did in the code and just strip out the entire style section and just mess up the whole email. So I just put it in its own little box.

[03:03] And you’ll see here, when you’re basically hovering over the main image, it is not viewable. And then when you hover, the alternate image is viewable. It’s really, really simple, really easy, and fun.

[03:22] The other element you might see as well is I use Nifty Images to pull in a first-name personalization. You can use any piece of data that you have in your database. We did lead first-name. And I just thought that would be cute. You know, “You belong here, Nout.” Of course, it’s not showing here because this is a test. But in doing that, you know, it’s a very quick and easy thing you can do.

Nout [03:52] And right here, Email on Acid shows how to create a responsive rollover images article. And this article is actually from 2016. But you know what? This still works. So I just used the code for the responsive method. I just repurposed this example. I love repurposing code that already exists. Someone’s played around with it, tested it, and is sharing it with the community. Always appreciate that. That way you’re not having to come up with, you know, code out of your own brain.

[04:30] And so with this older article, there are multiple different methods. There’s a fix for Outlook, which I did not employ. And there’s also this section about adding support for Gmail. This actually worked perfectly. This is very, very simple, just two images, a class around both images. Each image has a class and then you’re using the hover pseudo-class to kind of tell it, when you’re hovering, show the alternative image. When you’re not, it shows the main image as the default. And then when you’re hovering also minimize the main image. So that appreciate, you know this example here. The instructions worked perfectly.

Nout [05:19] So let me show you what it actually looks like. I’m going to have to go into Gmail. So right here, this is the email test in my inbox. It’s not showing the first name personalization because it’s a test email, so it’s not pulling my name from our marketing automation. But you can see when I mouse over this section…

Megan [05:46] Ah! So cool.

Nout [05:47] It swaps the image. So just kind of a little fun element, super simple. And the other thing I wanted to say was this does work on mobile, but because you don’t ever have a hover state on mobile, when you press the image, when you tap the image with your finger, you can kind of see for a second that the alternative image shows and then it takes you to the link.

[06:15] So I think, personally, that was a fine experience for what I was trying to achieve here because I knew that it was going to heavily skew towards desktop. In the example, I believe that I showed on the Email on Acid blog, there is some stuff you can do to like do a little bit of a delay on mobile so that the person maybe sees the hover state a little bit longer. But so I guess consider, you know, your audience and your email clients when you’re building something like this.

Megan [06:51] Very cool. This is awesome. I love it. I’m probably going to try this soon. Never done it before and it’s great to see how easy it is to do. And just that little piece of interactivity is just so, so delightful. I love this. Thank you for showing it to us.

Megan [07:08] I can’t wait to try it out in one of our emails. Don’t be surprised if you see it show up somewhere in the Email on Acid newsletter, which if you’re not subscribed to that – you should. Again, Nout, thank you. Why don’t you tell us real quick where we can find you on, like, the socials and whatnot?

Nout [07:25] Absolutely. And thank you, Megan. It’s such a simple thing. And I did borrow that code from the Email on Acid blog. So I appreciate that content. You can find me on Twitter at @kittehluvs.  Because I’m a cat lady. And you can find me – I’m always around Email Geeks Slack. So if you’re on there, hit me up. Yeah. That’s it, I guess.

Megan [07:55] Awesome. Thank you again for coming on and thank you for watching Notes from the Dev. Stay tuned for more episodes. Be sure to like follow and subscribe to our channel and we’ll bring you more next time.