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!