Responsive Rollover Images for Email

responsive-rollover

A while back I wrote an article 3 Steps to Create an Interactive Email Using CSS that demonstrated a method to create rollover images in email using background images. However the old method requires the width of the image to be fixed because the background-size property is not uniformly supported by all email clients.

This article goes into how to create responsive rollover images.

Here’s a tool that generates the code for responsive rollover images.

You can also access an older version that uses background images here.



Latest Comments
  1. Mord

    Hi! having fun trying to implement this! QQ. in mobile, (where there is no link to go to) is the image meant to revert on tap too?
    Right now can only get it to flip to the alternate image but not back. have you seen this before?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">