user2940062 user2940062 - 1 month ago 10
CSS Question

Hover image (animate) in news letter email

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

Answer

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"