In our blog, we have already talked about how to implement pagination in a letter, but this is not the only version of interactive e-mailing. In some cases, you can create eye-catching emails using the hover-effect when the content changes when you hover over it.
Today we present to your attention a selection of FreshInbox blog articles about how to create an interactive email.
The first method involves three simple steps.
Step 1: the table and background image
First, you need to create a table that will contain one cell with the image as the background:
<table style="height: 31px;" border="0" width="389" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="240"></td>
</tr>
</tbody>
</table>
Step 2: link and image
For hover- effect you need two images — one is shown initially and the other appears when you hover. The second step is to define the main image to be “wrapped” by link. Also, add to the link the class “img-swap” and apply to the image property display:block.
<table cellpadding=0 cellspacing=0 border=0><tr><td width=240 background="http://../alternate-image.jpg"><a class="img-swap" href="http://../link"><img src="http://../primary-image.jpg" width="240" height="170" border="0" style="display:block;" alt="the product"></a></td></tr></table>Step 3: style and hover
The final step is to add to the link styles and setting for it pseudo-class :hover, “targeted” on the image. Set the height of the image to 0px in that case, when the cursor hovers over a link, you can hide the image that the “background” image of the cell. Style display is set to :block for the link kept the width and height, even if concluded in it hidden image.
<style>
.img-swap {
display: block;
width: 240px;
height: 170px;
}
.img-swap:hover img {
height: 0px;
}
</style>
This method is supported in Yahoo! Mail Outlook.com (and Outlook 2003). There is a modification for Gmail, which we have discussed in detail in a previous article.
Click to see a surprise
Another technique allows you to create interactive emails using the hover-effect, and for mobile users to show “surprise” after a click on the picture.
This method is similar to the one described above but it differs in that, initially, for unsupported clients is not shown the original image, and the picture appears. This allows users with unsupported email programs not to miss the very meaning of the letters (although all the interactivity they will not be available).
Supported clients: iOS Mail, Android 4.x Mail, Yahoo! Mail Outlook.com and Gmail.com (with described at the link above hack with attribute selectors).
Unsupported clients: desktop, Outlook, mobile Gmail and Gmail for business
What is the difference from the previous method
To make it possible to display the opened image, you need to implement small changes compared to the previous version of the technique. Instead of using image-cover as overlay, and opened the pictures as a background, we need to do the opposite:
<table border=1 cellpadding=0 cellspacing=0 background="http://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="1450830627199316115658" style="display:block;" height=400 width=500 alt="A surprise!" border=0></a></td></tr></table>
Opened the image will be the main, and the original “cover” will become the background. Then on supported email clients, we initially hide the overlay, showing only the cover (i.e. the background). When the user hovers the cursor over the image, he has to be shown the hidden image.
So, instead of:
rollover:hover img{ max-height: 0px; height:0px;}
The code will look like this:
.reveal img{max-height:0px;height:0px;}.reveal:hover img{ max-height: none; height: auto;}
Thus, if your email program does not support interactivity, the user will see the image, which eventually opens on hover. In this case, the wow-effect is lost but retained the meaning of the message.
Besides, the image is wrapped in a “dead link” – it is necessary in order to effect triggered by tap on iOS and Android. The link may be active, but then the Android users will be redirected to it. In principle, interactivity on mobile devices you can even turn off with a special media query:
@media screen and (max-device-width: 1024px){ .reveal img{ max-height: none !important; height: auto !important; } }
Under the spoiler presents the full code for the example (to work with it, you can on Codepen):
This text is a translation of the article “How-to: Техники создания интерактивных email-писем с помощью CSS” published by @lol_wat on habrahabr.ru.
About the CleanTalk service
CleanTalk is a cloud service to protect websites from spam bots. CleanTalk uses protection methods that are invisible to the visitors of the website. This allows you to abandon the methods of protection that require the user to prove that he is a human (captcha, question-answer etc.).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Rollover to Reveal</title>
<!--
This version supports mobile
-->
<style>
/* wrapping in media query prevents styles from activating in OWA */
.yfix{}
@media screen and (max-width:9999px) {
.reveal img{
max-height: 0px;
height:0px;
}
.reveal:hover img{
max-height: none;
height: auto;
}
* [lang=x-reveal] img{
max-height: 0px;
height:0px;
}
* [lang=x-reveal]:hover img{
max-height: none;
height: auto;
}
}
</style>
</head>
<body style="margin:0px; padding:0px;">
<table border=1 cellpadding=0 cellspacing=0 background="http://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="1450830627199316115658" style="display:block;" height=400 width=500 alt="A surprise!" border=0></a></td>
</tr></table>
</body>
Leave a Reply