In 3 Steps to Create an Interactive Email Using CSS I showed how to create “rollover images” in email wherein the user could move their cursor over an image and an alternate image will be shown. This tutorial will show you how to create a similar effect on mobile.

A major difference between mobile and desktop/web email clients is that there is no concept of a hover in mobile since there is no cursor. For this example we’ll add a space where the user can tap to display an alternative image.

This example works on mobile email clients that support media queries such as the iPhone and Android’s native email clients which account for the majority of mobile email opens according to Litmus.

Step 1: Front as Main Image and Back as Background

First we’re going to create an image element showing the primary image together with a link and wrap it in a div with the alternative image set as the background image.

<div class="mobi-swap-content" style="background-image:url(http://.../back-image.jpg);">
<a href="http://../link"><img src="http://.../front-image.jpg" 
  style="display:block;" height="265" width="250" alt="..." border="0"></a>
</div>

Step 2: Tap Triggers

Second, we’ll add the trigger elements that the user will tap on when viewed on a mobile device. Notice that this element is initially hidden so that recipients on non-mobile clients do not see them. An article explaining techniques to hide elements is here. All of it is wrapped within a div with the position set to relative. This allows us to position the triggers using absolute coordinates in the media query later.

<div style="position:relative;">
  <!--[if !mso 9]><!-->
  <div class="mobi-swap-close" style="display:none;max-height:0px;overflow:hidden;">
  <a href="#">Tap here to show front</a></div>
  <div class="mobi-swap-open" style="display:none;max-height:0px;overflow:hidden;">
  <a href="#">Tap here to show back</a></div>
  <!--<![endif]-->
    <div class="mobi-swap-content" style="background-image:url(http://.../back-image.jpg);">
    <a href="http://../link"><img src="http://.../front-image.jpg" 
      style="display:block;" height="265" width="250" alt="..." border="0"></a>
    </div>
</div>

Step 3: Mobile Media Queries

Third,  we’ll add the CSS rules in a media query block that will display the trigger elements when the email is opened on a mobile device. Notice we’re using a modified way to write the CSS rule in order to work around Yahoo!’s Media Query issues (Update: Yahoo! fixed this in 2015):

@media screen and (max-device-width: 480px) {
  div[class=mobi-swap-open], div[class=mobi-swap-close]{
    display: block !important;
    max-height: none !important;   
    background-color: #eeeeee;
    padding-left:10px;
    font: 15px Helvetica;
    line-height:40px;
  }
  /* Make the link fill up the space of its container */
  div[class=mobi-swap-open] a, div[class=mobi-swap-close] a{
    display:block;
    text-decoration:none;
  }
  /* Position the open trigger above the close trigger */
  div[class=mobi-swap-open] {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
  }
}

Step 4: :hover to Switch

Finally we’ll add the CSS rules to the media query block that will switch the image when the user taps on the open trigger:

  div[class=mobi-swap-open]:hover {
    visibility: hidden;
  }
  div[class=mobi-swap-open]:hover + div[class=mobi-swap-content] img{
    visibility:hidden;
  }

Here we are using the hover pseudoclass. Even though mobile environments do not support a cursor and hence you can’t technically “hover” over an element, mobile environments such as the iPhone and Android trigger a hover event when a user taps on an element that is configured to respond to it. So in this case, the open trigger becomes hidden and exposes the close trigger underneath it.

It is also worth pointing out that there is a “+” in the selector for the second rule. This is called a sibling selector. With a sibling selector, when the left selector is active the CSS rules are applied to the elements that match the selector on the right (provided the right element is immediately after the element in the left selector)*

In this case, when the user taps the open trigger, the image within the adjacent div matching the class “mobi-swap-content” is hidden, exposing the alternative image set as the background of its containing div.

Now when the user taps on the close trigger, the open trigger will re-appear and the original image will also become visible again. This is because tapping on any other element will cause the mobile email client to revert any hover actions taken previously – in our case we merely gave the user a space to tap on to perform it.

Advanced Version

So far we’ve got all the components necessary to perform an image switch on a mobile client. However, having the trigger elements at the top of the image isn’t ideal since the user’s finger will block the image while toggling between the two images. With a few tweaks we can move the trigger to the bottom.

<style>
 @media screen and (max-device-width: 480px) {
  div[class=mobi-swap-open], div[class=mobi-swap-close]{
    display: block !important;
    max-height: none !important;   
    background-color: #eeeeee;
    padding-left:10px;
    font: 15px Helvetica;
    line-height:40px;
  }
  div[class=mobi-swap-open] a, div[class=mobi-swap-close] a{
    display:block;
    text-decoration:none;
  }
  div[class=mobi-swap-open] {
    position:absolute;
    bottom:0px; 
    left:0px;
    right:0px;
  }
  div[class=mobi-swap-open]:hover {
    visibility: hidden;
  }
  div[class=mobi-swap-open]:hover + div[class=mobi-swap-content] img{
    visibility:hidden;
  }
}
</style>

<div style="position:relative;">
<!--[if !mso 9]><!-->
<div class="mobi-swap-open" style="top:auto;bottom:0px;display:none;max-height:0px;overflow:hidden;">
<a href="#">Tap here to show back</a></div>
<!--<![endif]-->
  <div class="mobi-swap-content" style="background-image:url(http://.../back-image.jpg);">
  <a href="http://../link"><img src="http://.../front-image.jpg" style="display:block;" height="265" width="250" alt="..." border="0"></a>
  </div>
<!--[if !mso 9]><!-->
<div class="mobi-swap-close" style="display:none;max-height:0px;overflow:hidden;">
  <a href="#">Tap here to show front</a></div>
<!--<![endif]-->
</div>

Here we moved the close trigger below the image but we left the open trigger above the image and modified its “top” attribute to “bottom”. This allows the open trigger to reside logically BEFORE the image (so that our “+” sibling selector rule will continue to work) while appearing visually after the image. Neat eh?

Takeaways:

• The ability to display different images allow you to give recipients a way to get a better idea of how a product looks without taking up a lot of space in your email.
• Interactive elements within an email can liven up the experience for the recipient and make your email more memorable.
• Although this example only works on the iPhone and Android’s native email clients, they account for the bulk of mobile email opens.

* There is also the “~” sibling selector which does not require that the sibling element be immediately after the first element. Unfortunately this selector is not supported by Android. Also, sibling selectors are CSS3 and therefore not supported by certain old desktop email clients However in our case this is moot since we’re targeting mobile clients.