Fresh
Inbox
Blog
Resources »
Tools
Image Carousel Creator
Rollover Image Creator
Rollover Image for Email
Generates code for a Rollover Image that displays an alternative image when the email recipient hovers the cursor over the image. (
Updated with responsive capability
).
Works on:
Yahoo! Mail, Outlook.com, AOL and Outlook 2003.
Walkthrough:
Tool to Create An Interactive Image in an Email
HTML/CSS explanations:
3 Steps to Create An Interactive Email Using CSS
Check out the
older non-responsive version
that uses background images
Primary Image URL:
ie. http://i.imgur.com/...png
Image Width:
Image Height:
Alternative Image URL:
Shown on mouseover
Link:
URL user goes to when image is clicked
Image Alt Text:
Generate
Clear
Scale image to width of container (Responsive)
Add the following in the
<head>
tag:
<style> .rollover:hover .rollover-main { max-height: 0px !important; } .rollover:hover div img { max-height: none !important; } </style>
Add the following in the
<body>
tag:
<a class="rollover" href="http://nike.com"> <img class="rollover-main" src="http://freshinbox.com/tools/rollover/images/shoe-rollover.jpg" width="400" style="display:block;width:100%;" alt="Nike Shoes" border="0"> <div style="mso-hide:all;"><img src="http://freshinbox.com/tools/rollover/images/shoe-rollover-alt.jpg" style="max-height:0px;display:block;width:100%;" width="400" alt="" border="0"></div> </a>
Copy
Subscribe to the FreshInbox mailing list
