{"id":1924,"date":"2015-07-31T13:13:09","date_gmt":"2015-07-31T13:13:09","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=1924"},"modified":"2015-12-01T00:33:51","modified_gmt":"2015-12-01T00:33:51","slug":"rollover-to-reveal-in-email","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/rollover-to-reveal-in-email\/","title":{"rendered":"Rollover or Tap to Reveal Technique in Email"},"content":{"rendered":"

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.<\/p>\n

\"rollover-reveal\"<\/p>\n

\n \n<\/div>\n

This technique is similar to the straightforward rollover images<\/a> 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.<\/p>\n

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.<\/p>\n

Users that see interactive version:<\/b>
iOS Mail, Android 4.x Mail, Yahoo! Mail, Outlook.com and Gmail.com (requires attribute selector hack<\/a>).<\/p>\n

Users that see the revealed message only:<\/b>
Desktop Outlook, Gmail mobile apps and Gmail for business.<\/p>\n

\nReady for something even more interactive?
\nTry out the Image Carousel for Email Tool<\/a>.\n<\/div>\n


<\/p>\n

Difference From Regular Rollover<\/h4>\n

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.<\/p>\n

<table border=1 cellpadding=0 cellspacing=0 background=\"https:\/\/freshinbox.com\/examples\/rollover-reveal-simple\/images\/reveal-close-l.jpg\">\r\n<tr><td>\r\n<a class=\"reveal\" lang=\"x-reveal\" style=\"display:block;width:500px;height:400px;\" \r\n  href=\"#\">\r\n  <img src=\"https:\/\/freshinbox.com\/examples\/rollover-reveal-simple\/images\/reveal-open-l.jpg\" \r\n  style=\"display:block;\" height=400 width=500 alt=\"A surprise!\" border=0>\r\n<\/a>\r\n<\/td><\/tr><\/table><\/pre>\n
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.<\/p>\n
So instead of:<\/p>\n
.rollover:hover img{\r\n    max-height: 0px;\r\n    height:0px;\r\n}<\/pre>\n
We reverse it and have the revealed overlay image initially hidden and then displayed when the user hovers over the area:<\/p>\n
.reveal img{\r\n  max-height: 0px;\r\n  height:0px;\r\n}\r\n.reveal:hover img{\r\n  max-height: none;\r\n  height: auto;\r\n}  <\/pre>\n
This way if a client does not support interactivity, the revealed image is shown by default. This takes away the \u201csurprise\u201d or novelty, but at least the recipient will see the message.<\/p>\n
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<\/a> method. Only use this if you need to use the reveal method.<\/p>\n
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.<\/p>\n
Alternatively you could disable interactivity on mobile and just show the revealed message using this media query:<\/p>\n
@media screen and (max-device-width: 1024px){\r\n  .reveal img{\r\n    max-height: none !important;\r\n    height: auto !important;\r\n  }     \r\n}<\/pre>\n


<\/p>\n
Source Code<\/h4>\n
See the Pen RPEbmN<\/a> by FreshInbox (@freshinbox<\/a>) on CodePen<\/a>.<\/p>\n