[Code Tutorial] How To Utilize Hover Effects In Your Emails

On By - Best Practices, Design - Add Comment

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 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 will be breaking down the interactive elements that can be utilized within email, where they will and will not render correctly, potential marketing uses, and example code that you can use within your own campaigns. Let’s start with the most simple and effective piece of interactivity to charm (most) inboxes: hover states. Specifically, hovering images and links.

Image Hover Effects

We are 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:

  •      Displaying two different angles of a product
  •      Replacing a lifestyle image with a product image
  •      Black and white image to color image (or vice versa)
  •      Promotion/Sale unveiling (“Hover to reveal you discount!”)
  •      Adding an icon or text overlay (think “Shop Now” or a magnifying glass icon)
  •      Zoom in/out effects
  •      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 @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, which may not be an ideal mobile experience, so we’ll show you how to disable the functionality on mobile devices.

0

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 just simply see the original image.

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

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 resonates with 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

0

BUTTON 2

0

TEXT LINK

0


Have additional questions? Feel free to ask them in the comments section and we’ll answer them as soon as we can.

Share on LinkedIn11Tweet about this on TwitterShare on Facebook4Share on Google+0

free ebook download

Click Here To Download

Leave a Reply

Your email address will not be published. Required fields are marked *