Hover image (animate) in news letter email

StackOverflow https://stackoverflow.com/questions/20713626

  •  20-09-2022
  •  | 
  •  

Question

I am trying to create a news letter to go out that will have an image animate when someone hovers over it. they are suppose to find the correct decoration in the email to click to win the prize so when they hover over them 1 will dance. I have it working just fine in basic html for web browsers, the code I am using is a css background so the upper half of the gif is still and the lower half does the moving and it appears when they mouse over it. In emails css backgrounds dont really work for everyone. 

    a.cssmouseover {
    display:block;
    width:95px;
    height:107px;
    background-image:url('url/moving.gif');
    background-position:0px 0px;
    }
    a.cssmouseover:hover {
    background-position:0px -107px;
    }

and 

<a href="/yourlinkhere" class="cssmouseover" alt="Happy Holidays" ></a>

I know emails are very limited on coding for security reasons and all email clients have several rules of their own so i was wondering if there a simple inline hover image code for doing something like this for basic html emails and will work with most email clients? or maybe a different way other than a gif to do something like this?

the person i am doing this for said they have seen it done before (if they did or didnt im not positive or if they just think they have)

thanks

Was it helpful?

Solution

I work at an e-mail marketing company

Quite a lot of css stuff is not cross e-mail client supported. Have a look at the list shown at this page http://www.campaignmonitor.com/css/

However, background images ARE possible under some conditions (also in Outlook). See this link for more information: http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email

Here is a link to a tool to create code for background images: http://emailbg.net

Hover actions are not possible at all.

Oh.. and Gif files work in almost any e-mail client, except Outlook (2007 and newer). Outlook will only show the first "still"

OTHER TIPS

After much experimenting, I discovered an effective, fail-secure "rollover" image method that renders in many major e-mail clients (such as Yahoo Mail and Outlook.com). Because this code does not use background images or Java Script, a "base" image still appears even if the e-mail client does not support CSS ":hover", which powers this code. Therefore, all e-mail clients will display the base image/icon (making this code fail-secure), and many clients (all that support ":hover") will render the "rollover" effect. To use this code in your e-mail, just set your still image as the first "base" img tag and your dancing GIF as the second "rollover" img tag. Here is the basic CSS and HTML behind the effect:

<style>
a:hover img, a:active img {
width: 0 !important;
height: 0 !important;
display: none !important;
max-width: 0;
max-height: 0;
}

a:hover img.roll, a:active img.roll {
width: 42px !important;
height: 42px !important;
display: inline !important;
max-width: 42px !important;
max-height: 42px !important;
}
</style>

<body style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; font-size: 100%; width: 100%; height: 100%;">
  <a href="http://example.com" target="_blank" title="Tooltip text" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 42px; height: 42px; cursor: pointer;">
    <img class="base" src="http://example.com/example.jpg" alt="Base Image" align="left" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 42px; height: 42px;" />
    <img class="roll" src="http://example.com/example.jpg" alt="Hover Image" align="left" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 0px; height: 0px;" />
  </a>
</body>

For a working example, here are some rollover social media icons that I created as part of an HTML e-mail design.

Unfortunately, the animation will not render in all e-mail programs, although the still image and link will display fine in any e-mail program with even basic HTML rendering. Good luck with your newsletter!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top