Click to Sign Up for a 7 Day Free Trial!

Email Development

How to Create Responsive Rollover Images for Email

Email On Acid

Rollover or mouseover images are ubiquitous on the web. E-commerce websites often feature images of products where an alternative view of a product is displayed when the visitor hovers a cursor over an image. Rollover images allow more information to be displayed without cluttering the page.


This article will go over how to create interactive rollover images in email that will scale with the width of your email. The rollover images will be interactive in Apple Mail, Yahoo! Mail, AOL Mail, the webmail version of Gmail and some versions of Outlook.com. In other email clients the image is non interactive.


Non-Responsive Method

I demonstrated a method to create rollover images in email using background images. However the old method requires the width of the image to be fixed because the background-size property is not uniformly supported by all email clients.

This means you cannot place the image within responsive layouts as the image will not scale.

Responsive Method

The basics of responsive rollover images is pretty straightforward - you wrap a link around two images, and hide the alternative image by default.

<a class="rollover" href="http://server/the-url">
  <img class="main" src="http://server/main-image.jpg" width="500" style="display:block;width:100%;">
  <img class="alt" src="http://server/alt-image.jpg" width="500" style="max-height:0px;display:block;width:100%;">
</a>

Then in a style block you use the :hover pseudo-class to hide the main image and show the alternate image when the user hovers over the link with the class "rollover".

.rollover:hover .main{
    max-height: 0px !important;
}
.rollover:hover .alt{
    max-height: none !important;
}

Simple huh? Unfortunately it's not so straightforward as both images will be visible in Outlook 2007+. This is because max-height is not supported by those clients. If you're wondering why not just use height instead, well Outlook 2007+ ignores image dimensions set to zero!

Fixes for Outlook

To hide the alternative image from Outlook, we wrap it with a div and use the mso-hide:all Microsoft Office style.

<a class="rollover" href="http://server/the-url">
  <img class="main" src="http://server/main-image.jpg" width="500" style="display:block;width:100%;">
  <div style="mso-hide:all;">
    <img class="alt" src="http://server/alt-image.jpg" width="500" style="display:block;width:100%;">
  </div>
</a>

Adding Support for Gmail

Finally, we use the attribute selector hack for Gmail to make the image interactive in Gmail webmail as well. We add a summary attribute on the link and we also simplify the code by replacing the "main" and "alt" classes with ">" direct child selector.

<!DOCTYPE>
<html>
<head>
<style>
  .rollover:hover > img,
  * [summary=rollover]:hover > img{
    max-height: 0px !important;
  }  
  .rollover:hover > div img,
  * [summary=rollover]:hover > div img{
    max-height: none !important;
  }
</style>
</head>
<body>
  <a class="rollover" summary="rollover" href="http://store.nike.com/us/en_us/pd/flyknit-lunar-3-running-shoe/pid-10252949/pgid-1561757">
    <img src="http://freshinbox.com/examples/image-swap/images/shoe-main2.jpg" width="500" style="display:block;width:100%;"  alt="Nike FlyKnit 3" border=0>
    <div style="mso-hide:all;">
      <img src="http://freshinbox.com/examples/image-swap/images/shoe-alt2.jpg" style="max-height:0px;display:block;width:100%;" width="500" alt="" border=0>
    </div>
  </a>
</body>
</html>

What about Mobile?

On mobile - specifically iOS - because the image is wrapped in a link, when a user taps on an image, both the hover and click even fires simultaneously. The rollover image will appear for a split second before the link opens in the browser.

Since this may be jarring to the user, we can disable the rollover state in mobile by using this media query

@media screen and (max-device-width:1024px) {
    .rollover:hover > img,
    * [summary=rollover]:hover > img{
      max-height: none !important;
    }
    .rollover:hover > div img,
    * [summary=rollover]:hover > div img{
      max-height: 0px !important;
    }  
  }

Completed Sample

Check out a working sample of this code.


Mobile Image Swap

It would be a shame if we went through all this effort without also supporting mobile. However all is not lost! Even though there's no concept of a hover state in mobile, we can try alternative approaches such as adding a separate "tapzone" to display the alternate image.

This article covers a method on how to display a rollover tapzone in mobile. In a future article I will cover a few more design techniques to support image swapping in mobile as well.

About the Author

Justin Khoo

Justin Khoo

Justin Khoo (@freshinbox) is an email developer and writes about email techniques and new innovations. He has been involved in many aspects of email over the past decade, everything from building webmail clients and email campaign services to coding HTML emails.

Join the Discussion

Good day. I sent out a test email and this does not work on any platform? I tried Gmail, Yahoo, Outlook.com.
Annemari Basson
Your code not works now. All references to which you refer are dated 2013 and 2014 years. Gmail strips "summary" now. And without it the meaning of article lost.
Aleksandr
Hi @Annemari,
A few things to keep in mind for this example to work, you need to put the <style> tags in the <head> of the email. Also your email service provider may be changing the markup of the email so make sure it isn't doing that.

Hi @Aleksandr,
We've always believed Gmail strips the <style> tag. But we've discovered that the consumer webmail version of Gmail (not Gmail for Business) actually only strips ID's and Classes leaving the <style> tag alone if placed in the head.

http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/
Justin Khoo
Hi, I couldn't be able to make your code works on gmail even putting the style tag in head. Could you put an example of this just in case I'm missing something?

Thanks for helping me.
Leticia
Tested on Chrome web, with and without vendor sending (via Silverpop), also tested on Outlook 2013, neither work at all, but the images *do* fallback correctly. Also tested out this tool:
http://freshinbox.com/tools/rollover/
with no luck. Original Email send has no style stripping of any kind.
emailzRhard
Can delete above comment.
As author states, these styles must absolutely be nested in the <head></head> of the email!

Tested & Working on:
Gmail Chrome: Full rollover support
Yahoo Chrome: Full rollover support
Outlook 2013 Client: Alternate rollover image correctly hidden

Thanks!
emailzRhard
Please, define "absolutely nested". I mean, where would you place the style tag (those which aren't lined in the body) but in the head of email?
I put the styles in the CODE SAMPLE above in head and the html in the body, but it seems that something's missing and I can't figure it out.

Thanks a lot
Leticia
Just to make it easy for you guys, I've updated the rollover tool with the responsive code. With the tool you should be able to see the example work in your inboxes without needing to muck with code smile

http://freshinbox.com/tools/rollover/
Justin Khoo
Love to code and works just great in stuff like Outlook.com and Outlook 2016 on Mac. But it seems that the Gmail-trick isn't working. Implemented it just like the code above and in the generator suggested, but the interactive-part isn't happening. It ain't a huge disaster, but I would love for it to work.
Kevin Rombouts
Will this work with a XHTML Strict doctype?
Email Newbie
I have an issue with Lotus : the roll-over doesn't print the second image...
Trashou
@Kevin this trick will work in Gmail webmail but not the Gmail mobile app unfortunately.

@Email Newbie: Yup this will work with XHTML Strict doctype as Yahoo! and Gmail ignores email doctype anyways since they're embedded within the webmail interface.

@Trashou: This unfortunately won't work in Lotus as interactive email usually won't work in Lotus or Outlook.
Justin Khoo
@Justin With all the changes to Gmail, I thought I'd give it a try again and now it seems to be working. Thanks for the update!
Kevin Rombouts
Hey Justin!
How about if you want to use a tap for hover for mobile, but it's not wrapped in a link?
Annie
Actually, nevermind, I forgot to erase the media queries, which are not necessary in my case because my images are not links, just supposed to be interactive.
Works wonderfully on iPhone (I also had no problems with Gmail, as questioned above), haven't had the chance to platform test on Android, though.

Thanks so much for this. Total lifesaver.
Annie (Again)

Leave a Comment