Here’s a way to implement a neat “rollover to reveal” message in email. You can send an email that has a teaser cover message that when the recipient hovers the cursor over the message it reveals a hidden surprise message. Mobile users see the message when the image is tapped.

This technique is similar to the straightforward rollover images in email with one important difference – Instead of showing the initial image as a fallback to non-supported clients, this technique shows the revealed message.

This way recipients using clients that don’t support the rollover technique won’t miss out on the message. They just miss out on the novelty.

Users that see interactive version:
iOS Mail, Android 4.x Mail, Yahoo! Mail, Outlook.com and Gmail.com (requires attribute selector hack).

Users that see the revealed message only:
Desktop Outlook, Gmail mobile apps and Gmail for business.

Difference From Regular Rollover

To support the reveal use-case, we will make some slight changes to the technique. Instead of placing the cover image (closed envelope) as the overlay image and the revealed image as the background image, we switch it.

<table border=1 cellpadding=0 cellspacing=0 background="https://freshinbox.com/examples/rollover-reveal-simple/images/reveal-close-l.jpg">
<tr><td>
<a class="reveal" lang="x-reveal" style="display:block;width:500px;height:400px;" 
  href="#">
  <img src="https://freshinbox.com/examples/rollover-reveal-simple/images/reveal-open-l.jpg" 
  style="display:block;" height=400 width=500 alt="A surprise!" border=0>
</a>
</td></tr></table>

The revealed image is placed as the image and the cover image is placed as the background. Then on supported clients, we initially hide the overlay image (the revealed image) showing the cover image. Then when the user hovers over the unit, the hidden overlay image containing the revealed image is shown.

So instead of:

.rollover:hover img{
    max-height: 0px;
    height:0px;
}

We reverse it and have the revealed overlay image initially hidden and then displayed when the user hovers over the area:

.reveal img{
  max-height: 0px;
  height:0px;
}
.reveal:hover img{
  max-height: none;
  height: auto;
}  

This way if a client does not support interactivity, the revealed image is shown by default. This takes away the “surprise” or novelty, but at least the recipient will see the message.

For regular rollovers such as a product rollover where you want to show the first image as fallback, you would continue to use the original rollover method. Only use this if you need to use the reveal method.

Also you may notice that the image is wrapped with a dead link. This is needed for the hover event to fire on iOS. You could put in a real link, but then Android users who tap on the image will immediately be taken to the link.

Alternatively you could disable interactivity on mobile and just show the revealed message using this media query:

@media screen and (max-device-width: 1024px){
  .reveal img{
    max-height: none !important;
    height: auto !important;
  }     
}

Source Code

See the Pen RPEbmN by FreshInbox (@freshinbox) on CodePen.

Next Step

I will be updating the Rollover Images for Email Tool to support the reveal use case shortly, but if you’re interested it would be a worthwhile exercise to play around!

Note: An earlier version of this post did not include the support of mobile clients. Jaina’s comment below spurred me to make the change :)