{"id":305,"date":"2014-02-03T11:31:17","date_gmt":"2014-02-03T11:31:17","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=305"},"modified":"2015-07-30T23:30:41","modified_gmt":"2015-07-30T23:30:41","slug":"rollover-images-revisited","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/rollover-images-revisited\/","title":{"rendered":"Image Swap for Email Revisited [non-mobile]"},"content":{"rendered":"

In 3 Steps to Create an Interactive Email Using CSS<\/a> we saw how we can implement a simple rollover or image swap effect in email. After further experimentation I’ve found a slightly simpler method to implement the same effect.<\/p>\n

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

Update 2:\u00a0<\/strong>Looks like Gmail doesn’t support visibility: hidden, so back to the original technique<\/a>.<\/p>\n

\"\"<\/a><\/p>\n

Toggling the visibility style<\/h4>\n

The original method involved setting the dimension on the link that wraps the image and then changing the height of the image to 0px when the user hovers over the link to reveal the alternate image.<\/p>\n

Original CSS<\/b>:
\n(with the added media query covered in a later article to disable on interactivity mobile<\/a>)<\/p>\n

<style>\r\n.img-swap {\r\n  display: block;\r\n  width: 240px;\r\n  height: 170px;\r\n}\r\n.img-swap:hover img {\r\n  height: 0px;\r\n}\r\n\u00a0@media only screen and (max-device-width: 1024px)  {\r\n  .img-swap:hover img{\r\n    height:170px;\r\n  }\r\n}\r\n<\/style><\/pre>\n
The simpler method is simply to set the visibility of the image to hidden.<\/p>\n
The updated CSS:<\/b><\/p>\n
<style>\r\n .img-swap:hover img{\r\n    visibility: hidden;\r\n  }\r\n \u00a0@media only screen and (max-device-width: 1024px)  {\r\n    .img-swap[class=img-swap]:hover img{\r\n      visibility: visible;    \r\n    }\r\n  }  \r\n<\/style><\/pre>\n
Takeaway<\/h4>\n
With this updated code, not only is the code simpler, you can now use the same CSS class for images of different heights and widths within the same email!<\/p>\n
Here’s a tool you can use to automate this.<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
In 3 Steps to Create an Interactive Email Using CSS<\/a> we saw how we can implement a simple rollover effect in email. After further experimentation I’ve found a slightly simpler method to implement the same effect…<\/p>\n","protected":false},"author":2,"featured_media":74,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28,24,25],"tags":[8,11,10,5,16,9,4,14,15,37,36],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/305"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":22,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/305\/revisions"}],"predecessor-version":[{"id":2066,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/305\/revisions\/2066"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/74"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}