A recent FreshInBox post 3 Steps to Create an Interactive Email using CSS showed how to create simple mouseover image effects that work with most of the major webmail clients including Outlook 2003.

If you tried out the example in that post on the iPhone and Android you probably noticed that although the touch devices don’t support the concept of a “cursor hover”, it does respond to the hover event when an element with hover is touched.

When you viewed the example on an iPhone and tapped on the image, the linked page will load in the mobile browser as expected, but when you return to the mail client you would notice that the alternative image is now showing (It swaps back then  you touch another image or link). This effect is also apparent on the iPad and Android devices.

This itself might be nothing more than an interesting “side-effect” to the user, but this behavior can be avoided by adding media queries to suppress the hover pseudo-class declaration when rendered in a mobile or tablet.

Limiting the effect to desktop email clients

One way to achieve that is to add a media query with a  “max-device-width” filter:

.img-swap:hover img{
  height: 0px;
}

@media only screen and (max-device-width: 1024px)  {
  .img-swap:hover img{
    height:170px;
  }
}

This media query overrides the earlier CSS :hover rule which set the height of the image to 0px upon a hover with a rule that to set the height to 170px instead (the height of the image) when rendered in a device with a screen narrower than 1024 pixels wide.

Yahoo! Mail Quirks

Update: Yahoo has fixed their media query bug so the strange syntax below is no longer required!

However, the desktop web version of Yahoo! Mail mangles up styles with media queries. Instead of simply stripping out media queries, Yahoo! Mail modifies them to an extent where some of the media queries actually “leak” through so that even on non-mobile clients the media queries for mobile clients are active. Email on Acid has an article with a very good explanation on what happens as well as a fix.

I’ve decided to use a modification of an example created by Campaign Monitor to solve problems you might encounter with the desktop version of Yahoo! Mail.

@media only screen and (max-device-width: 1024px)  {
  .img-swap[class=img-swap]:hover img{
    height:170px;
  }
}

The above code looks quirky but it does what it is effective for two reasons. One, when rendered in a mobile or tablet, it keeps the height of the image at 170px regardless of “hover” state. And two, when rendered in Yahoo! Mail, the style gets mangled in a way that makes the CSS rule inactive even though Yahoo! Mail strips out the media query.

Modified Styles

The final style tag of the previous example should look  like this:

.img-swap {
 display: block;
 width: 240px;
 height: 170px;
}

.img-swap:hover img {
 height: 0px;
}

@media only screen and (max-device-width: 1024px)  {
  .img-swap[class=img-swap]:hover img{
    height:170px;
  }
}

(Photo by chrisinplymouth)