How to Create a “Scratch Off” Effect in Email HTML
The team at Email on Acid wanted to do something extra special to announce our Month of Giving holiday contest. So we came up with a fun design featuring “Email Gnomes” to give away gifts. At the centerpiece of this email, we designed a scratch-off ticket.
Now, “scratch off” functionality doesn’t really exist in email—at least not yet. That’s where coding magic comes into play.
Scratch-Off Email: Creating the Functionality
This interactive email renders in three stages. The interactivity is a “touch to unveil” function that reveals an animated GIF. This is what gives the illusion of a scratch off. Here are three scenarios how the “scratch off” will play out:
Scenario 1
If the email client supports the interactivity, then the functionality will display the animated GIF.
Scenario 2
If there isn’t support for interactivity, just the animated GIF will play.
Scenario 3
The fallback will display if there’s no support for the interactivity or GIF.
The Process
There are three different types of email clients, mobile, desktop, and web. Before building the email, we created the interactivity, and tested it—ensuring it worked properly. We built it with no content, and used images from Placeholder.com. These placeholder images can be set to any size, and you can set custom text.
Here’s an example of what was used:
https://via.placeholder.com/500×500/?text=Touch To Unveil Image
https://via.placeholder.com/500×500/?text=Main Offer Animated GIF
http://via.placeholder.com/500×500/?text=FALLBACK
Through this technique, and by running tests through Email on Acid, we were able to identify what scenario applied to the email (1,2, or 3).
Here’s an example of the interactivity working. The touch to unveil image is what you tap to play the animated GIF.
Here’s an example of the fallback working. This will display in the email clients that don’t support the interactivity, or the animated GIF.
Here’s an example of the animated GIF working.
The CSS
Add this code below between the <head></head> tags of the email. Don’t add it to any media queries you have in place for responsive design.
Using this WebKit media query, you can target email clients that support the :checked selector. The two CSS classes are created, .touch and .unveil. Then they combine as an ID with the tilde ~ and asterisk * before the class .unveil to address all interactive elements.
@media screen and (-webkit-min-device-pixel-ratio:0) {
.touch {
display: block !important;
mso-hide: all !important;
}
.unveil {
display: none
}
#touchunveil:checked ~ * .unveil {
display: block !important;
}
#touchunveil:checked ~ * .touch {
display: none !important;
}
}The :checked selector is a pseudo-class that lets the user toggle content based on the state of a checkbox, all without using JavaScript. The selector represents any radio input using <input type=”radio”>. This applies the #touchunveil ID from the WebKit here. Below is the setup for the radio button that will unveil the animated GIF and let it play. The way the style tag is coded ensures it won’t show up in the scratch-off email.
<!--[if mso]><!-->
<input type="radio" name="touchunveil" id="touchunveil" style="mso-hide:all;display:none!important;height:0px;max-height:0px;overflow:hidden;font-size:0;margin-left:-10000px;">
<!--<![endif]-->You can read more about the CSS :checked selector here.
The HTML
Wrapped in a Microsoft Outlook conditional statement, and referencing the WebKit classes in the CSS the table with the .touch class is displaying the first image. The table with the class of .unveil is not displaying, but will appear when the image with the.touch class is activated by being tapped. The image is wrapped in a label tag with name="touchunveil" id="touchunveil” and it activates the radio button input to switch out the image to the animated GIF of the scratch off.
<!--[if !mso]><!-->
<table width="600" role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" style="width:100%; max-width:600px;">
<tr>
<td align="center" valign="top" bgcolor="#f4f4f4"><!-- Touch to Unveil -->
<table role="presentation" width="600" style="width:100%; max-width:600px;" cellpadding="0" cellspacing="0" border="0" align="center" class="100w">
<tr>
<td align="center" valign="top"><!-- Main Offer Scratch Off -->
<table class="unveil 100w" width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:600px;mso-hide:all;">
<tr>
<td valign="middle" align="center" bgcolor="#FFFFFF"
style="color:#000001; font-family:serif; font-size:14px; mso-line-height-rule:exactly;line-height:22px; font-weight:400; padding:16px 0px 0px 0px;"
class="em_padnon"> </td>
</tr>
<tr>
<td align="center"><a href="https://marketing.emailonacid.com/month-of-giving"><img src="https://marketing.emailonacid.com/hs-fs/hubfs/2019%20Email%20Images/Holiday%20Email/2019Holiday-Email-ScratchOff2.gif?upscale=true&name=2019Holiday-Email-ScratchOff2.gif" width="100%" height="auto" style="display:block;width:100%;max-width:600px;height:auto;" alt="Enter here for a chance to win one of our FREE EMAIL GIFTS! – LET’S GO" border="0" class="100w"></a></td>
</tr>
</table>
<table class="touch" width="100%" border="0" cellspacing="0" cellpadding="0" style="mso-hide:all; display:none;">
<tr>
<td valign="middle" align="center" bgcolor="#FFFFFF"
style="color:#000001; font-family:serif; font-size:14px; mso-line-height-rule:exactly;line-height:22px; font-weight:400; padding:16px 0px 0px 0px;"
class="em_padnon"><i>Click the gift below to find out you can win yours:</i></td>
</tr>
<tr style="mso-hide:all">
<td align="center" style="mso-hide:all"><!-- Touch to Unveil Image -->
<label for="touchunveil"> <img class="100w" border="0" src="https://marketing.emailonacid.com/hubfs/2019%20Email%20Images/Holiday%20Email/2019Holiday-Email-PreScratch.jpg" width="100%" style="width:100%;max-width:600px; display:block; mso-hide:all; height: auto;" alt=""> </label></td>
</tr>
</table></td>
</tr>
</table>
<!-- // End Touch to Unveil --></td>
</tr>
</table>
<!--<![endif]-->** Note: Notice the empty alt=”” on the image for accessibility.
The Fallback
In the event you’re stuck with the third scenario (neither the functionality nor GIF rendering), you’re going to need a fallback of some sort—same as every other interactive email. Sometimes the fallback is just the interactivity not working, which actually makes developing a bit easier. In this example, the fallback is a static image that displays in clients that don’t support the interactivity or the GIF animation.
<!--[if gte mso 9]>
<center>
<table border="0" width="600" align="center" valign="top" cellpadding="0" cellspacing="0" bgcolor="#f4f4f4">
<tr>
<td align="center" valign="top">
<table border="0" width="600" align="center" valign="top" cellpadding="0" cellspacing="0" bgcolor="#f4f4f4" style="padding:0px 0px 0px 0px; width:600px;">
<tr>
<td align="center" valign="top"><img src="https://marketing.emailonacid.com/hubfs/2019%20Email%20Images/Holiday%20Email/2019Holiday-Email-FallbackImage.jpg" width="600" style="width:600px;" /></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
<![endif]-->Targeting Outlook.com and Office 365 via CSS
As we were close to completing the email, we noticed the GIF animation wasn’t playing in Outlook.com or Office 365 web clients. The interactivity wasn’t working, so the first image wasn’t disappearing. We needed to find a way to target these clients. By checking out How to Target Email Clients and some experimentation, we were able to target the web clients to render correctly and display the animated GIF upon the user opening the scratch-off email.
Example:
[class=“x_foo”] { }Example used in CSS:
[class~="x_unveil"] {
display: block !important;
}
[class~="x_touch"] {
display: none !important;
}Seriously…Testing is Important
Above all, when creating any type of interactive functionality, it is crucial to QA and test it. We tested our email live in Samsung Mail, Apple Mail, Outlook 2019 Mac Desktop, Outlook.com web client, and Office 365 web clients. Using Email on Acid and the actual live email client previews to validate the syntax was parsing correctly, we were able to catch an issue with Outlook.com and Office 365. We were also able to render in 98 out of 99 email clients.
And in some of the email web clients where we couldn’t do a live test, we could still see the Animated GIF working. Here’s the example…
The End Result
Pretty amazing huh! No marketing email ever comes easy. There were plenty of last-minute creative changes before we deployed. But through those changes, the core of the code remained the same—a combination of touch to unveil and animated GIF (with fallbacks, of course).
Is there a view online link for this email? I receive your emails, and have plenty with the christmas gnomes, but not this particular campaign.
Hey James! Thanks for reading our blog. Unfortunately we don’t have a web-based version of the email available. And the contest itself is over. However, you can see the scratch off effect on the hero image of the blog. We may use this same effect on future emails, so stay tuned.
This didn’t work in any of the browsers I used.
Lori, I’m sorry this didn’t work for you. The coding is geared toward email, but it should work in any browser that supports web kit
@media screen and (-webkit-min-device-pixel-ratio:0). Hope this helps!
Hi,
I tried this in one of my emails and it seems to be working, yay! During my testing in Email On Acid i’m seeing either my first image (great) or my fallback (great) but how do i know that the interactivity of clicking on my first image will work to show my second image or not?
Hello Kate. Thanks for reading our blog. To answer your question, my coders tell me to have you test in as many actual email clients as you can to verify.
Use our platform to test of course, as it does show what image is being displayed, but you’ll also need to test in the actual email clients for verification. Hope this helps.
Finally, I can now create a “Scratch Off” effect in the email HTML. Really thank you for this informative and detailed post on this topic.
Deny, that’s awesome! Glad you found our post helpful. We’ll be sharing some more coding tips and tricks from Ed in the upcoming months, so stay tuned.
Glad your enjoying the blogs! Thanks for the shoutout.
I don’t understand why it’s coded as a radio button. Is it not a real radio button?
Liz, I had to reach out to the author for this one. Here’s what Ed said, “Because email technology is old, I have to use old HTML techniques. Without that input type radio button the tap to show effect doesn’t work.” Hope this helps clarify things. Good luck with your coding, and I hope you’re able to create some really amazing scratch-off emails.
Really wish we could see an example of the working code together in an email instead of in pieces. It’s not clear how it all works together.
Hey Matt, The idea here was to break it out into chunks and explain the process for this email. Maybe for the next code-focused blog we do we’ll put all of the code together at the end of it so it’s easier to get
Hi there! This is AWESOME and it works great (for the most part). It tested fine on almost every client I tried. However I did run into a bag with outlook mobile for iOS. The interactive element isn’t responding and the fallback isn’t shown. Instead the “pre-scratch” image shows up and doesn’t allow the user to click to reveal the hidden gif. The best solution I could come up with was to basically rewrite the element without interactivity, hide it then show it in outlook iOS with the [data-outlook-cycle] selector. This seems cumbersome. It’s a lot of redundant code and basically just shows the animated gif on most clients. I was wondering if anyone found a better solution. Note: outlook Mac, web and windows all work great. It’s just a bug on Mobile for iOS. Overall really cool though!!
Thanks for doing a deep dive into this interactive email! So far nobody has mentioned this, or a workaround for it, but we really appreciate you bringing it up and will definitely look into it.
Class “100w” can you please provide the code of it?
its been used in following img tag
Hey Mounesh – great catch! The class 100w is actually from a previous version of the template and we forgot to remove it from this example. Sorry for the confusion!
Have you ever thought about a way to add a scratching sound to this?
Hey Keshav! We’ve all been sitting around scratching our heads over this one (pun intended). It’s such an interesting idea! We haven’t tried it yet, but it’s definitely going on the list of things to test out.