Email Development May 31, 2016

How to Create Responsive Rollover Images for Email

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.

Show me the code

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 alt image by default.

<a class="rollover" href="http://server/the-url">
  <img class="main" src="https://server/main-image.jpg" width="500" style="display:block;width:100%;">
  <img class="alt" src="https://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 those clients don’t support max-height property. 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="https://server/main-image.jpg" width="500" style="display:block;width:100%;">
  <div style="mso-hide:all;">
    <img class="alt" src="https://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="https://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="https://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 a link wraps the image, when a user taps on an image, both the hover and click fire 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;
    }  
  }

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.

Author: Kyle Lapaglia

19 thoughts on “How to Create Responsive Rollover Images for Email”

Annemari Basson says:

June 2, 2016 at 7:07 am

Good day. I sent out a test email and this does not work on any platform? I tried Gmail, Yahoo, Outlook.com.
Aleksandr says:

June 2, 2016 at 10:59 am

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.
Justin Khoo says:

June 2, 2016 at 4:42 pm

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/
Leticia says:

June 6, 2016 at 8:14 am

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.
emailzRhard says:

June 6, 2016 at 5:45 pm

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 says:

June 6, 2016 at 7:01 pm

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!
Leticia says:

June 7, 2016 at 2:30 pm

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
Justin Khoo says:

June 7, 2016 at 10:15 pm

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 🙂

http://freshinbox.com/tools/rollover/
Kevin Rombouts says:

June 28, 2016 at 12:04 pm

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.
Email Newbie says:

October 20, 2016 at 7:16 pm

Will this work with a XHTML Strict doctype?
Trashou says:

January 9, 2017 at 10:53 am

I have an issue with Lotus : the roll-over doesn’t print the second image…
Justin Khoo says:

January 11, 2017 at 3:37 am

@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.
Kevin Rombouts says:

January 11, 2017 at 7:32 am

@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!
Annie says:

March 3, 2017 at 9:02 pm

Hey Justin!
How about if you want to use a tap for hover for mobile, but it’s not wrapped in a link?
Annie (Again) says:

March 3, 2017 at 9:35 pm

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.
lottie m says:

October 17, 2017 at 2:10 pm

hi justin, I have nearly implemented this as a set of three products but when I try and add some padding in between in messes up. Are you able to help?
Thanks, Lottie
Matteo says:

November 2, 2017 at 10:12 am

Works perfectly with yahoo and gmail but can’t figured out why is not on Outlook and Hotmail.
Testing on Windows – Chrome.
I wrap as explained the second image inside div with mso hide all and is actually hiding but not displaying the second image on hover
Nicole O'Neal says:

November 6, 2017 at 9:50 pm

Brilliant article Justin Koo @freshinbox! Just what I was looking for. Thank you for sharing.

The attribute selector hack for Gmail is awesome!
K says:

January 24, 2018 at 8:35 am

Working on the latest version of Outlook 16.9 for Mac, also working on Google Gmail. However, for Google Inbox and Outlook.com it is not working.

Any tips for Google Inbox?