{"id":21,"date":"2013-12-19T00:45:40","date_gmt":"2013-12-19T00:45:40","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=21"},"modified":"2015-12-21T02:59:00","modified_gmt":"2015-12-21T02:59:00","slug":"3-steps-to-create-an-interactive-email-using-css","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/3-steps-to-create-an-interactive-email-using-css\/","title":{"rendered":"3 Steps to Create an Interactive Email Using CSS"},"content":{"rendered":"

Update:\u00a0<\/strong>Here’s a tool to create this example: Rollover Image Builder for Email<\/a>.<\/p>\n

Do you find yourself trying to find new ways to engage your email audience with compelling and eye-catching content?<\/p>\n

This example will show you, in three easy steps, how to do just that. By creating an email that will display an alternate view upon the mouseover of an image, users will have a much more interactive and enjoyable experience.<\/p>\n

\"\"<\/div>\n

1. Table + Background Image<\/h2>\n

The first step is to create a table containing a single cell with the alternate image as the cell’s background.<\/p>\n

<table cellpadding=0 cellspacing=0 border=0><tr>\r\n<td width=240 background=\"http:\/\/...\/alternate-image.jpg\">\r\n<\/td><\/tr><\/table><\/pre>\n
 <\/p>\n
2. Link + Image<\/h2>\n
The next step involves adding the primary image wrapped within a link. Add the class “img-swap” to the link and set the style “display:block;” to the image.<\/p>\n
<table cellpadding=0 cellspacing=0 border=0><tr>\r\n<td width=240 background=\"http:\/\/..\/alternate-image.jpg\">\r\n<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>\r\n<\/td><\/tr><\/table><\/pre>\n
 <\/p>\n
3. Style + Hover<\/h2>\n
The third and final step is adding styles to the link and setting the :hover pseudo-class on the link that targets the image within it. By setting the height of the image to 0px when the cursor is over the link, the image is hidden and the background image of the table cell is displayed. The link’s display style is set to “block” so that the link retains its width and height even when the enclosed image is collapsed allowing the user to click on it.<\/p>\n
Update:\u00a0<\/strong>This article covers a neat trick to get this to work in Gmail webmail<\/a>.<\/p>\n
<style>\r\n.img-swap {\r\n  display: block;\r\n  width: 240px;\r\n  height: 170px;\r\n}\r\n\r\n.img-swap:hover img {\r\n  height: 0px;\r\n}\r\n<\/style><\/pre>\n