Update: Here’s a tool to create this example: Rollover Image Builder for Email.

Do you find yourself trying to find new ways to engage your email audience with compelling and eye-catching content?

This example will show you, in three easy steps, how to do just that. By creating an email that will display an alternate view upon the mouseover of an image, users will have a much more interactive and enjoyable experience.

1. Table + Background Image

The first step is to create a table containing a single cell with the alternate image as the cell’s background.

<table cellpadding=0 cellspacing=0 border=0><tr>
<td width=240 background="http://.../alternate-image.jpg">
</td></tr></table>

2. Link + Image

The next step involves adding the primary image wrapped within a link. Add the class “img-swap” to the link and set the style “display:block;” to the image.

<table cellpadding=0 cellspacing=0 border=0><tr>
<td width=240 background="http://../alternate-image.jpg">
<a class="img-swap" href="http://../link"><img src="http://../primary-image.jpg" width="240" height="170" border="0" style="display:block;" alt="the product"></a>
</td></tr></table>

3. Style + Hover

The third and final step is adding styles to the link and setting the :hover pseudo-class on the link that targets the image within it. By setting the height of the image to 0px when the cursor is over the link, the image is hidden and the background image of the table cell is displayed. The link’s display style is set to “block” so that the link retains its width and height even when the enclosed image is collapsed allowing the user to click on it.

Update: This article covers a neat trick to get this to work in Gmail webmail.

<style>
.img-swap {
  display: block;
  width: 240px;
  height: 170px;
}

.img-swap:hover img {
  height: 0px;
}
</style>

Mouseover the image above

See how it works in your inbox by sending yourself an example.

Client support

The effects will be visible for users on Yahoo! Mail, Outlook.com (aka Hotmail), AOL as well as Outlook 2003. Clients that don’t support embedded style tags such as Gmail will just not respond to the hover event. Although the interactive effect does not work on Outlook 2007 and above, they still render perfectly, which is a huge plus! A coming article will focus on how to leverage the same techniques for mobile clients.

I’m interested to see how others are using the :hover pseudo-class or any other method to create interactive content in email. Let me know in the comments or on Twitter if this is something you find interesting or are considering trying out!