Responsive Rollover Images for Email


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.

Subscribe to the #EmailGeeks Newsletter

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 to Mord Cancel reply

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