"Rollover" Social Media Icons for HTML E-mail

This HTML code fragment demonstrates a "rollover" effect for icons in a personal HTML e-mail.

by Theodore Carrigan-Broda

HTML

<body style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; font-size: 100%; width: 100%; height: 100%;">
    <a href="http://plus.google.com/100930663503367787549/posts" target="_blank" title="Add me on Google+" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 42px; height: 42px; cursor: pointer;">
      <img class="base" src="http://s15.postimg.org/4rn1javav/google_icon.jpg" alt="Visit Theodore&rsquo;s Google+ profile" align="left" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 42px; height: 42px;" />
      <img class="roll" src="http://s11.postimg.org/ticrw5b3j/google_icon_hover.jpg" alt="Visit Theodore&rsquo;s Google+ profile" align="left" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 0px; height: 0px;" />
    </a>
    <a href="http://twitter.com/TheodoreBroda" target="_blank" title="Follow me on Twitter" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 42px; height: 42px; cursor: pointer;">
      <img class="base" src="http://s28.postimg.org/vj9hwzj09/twitter_icon.jpg" alt="Visit Theodore&rsquo;s Twitter profile" align="left" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 42px; height: 42px;" />
      <img class="roll" src="http://s28.postimg.org/bekj59ek9/twitter_icon_hover.jpg" alt="Visit Theodore&rsquo;s Twitter profile" align="left" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 0px; height: 0px;" />
    </a>
    <a href="http://www.linkedin.com/in/TheodoreBroda" target="_blank" title="Connect with me on LinkedIn" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 42px; height: 42px; cursor: pointer;">
      <img class="base" src="http://s29.postimg.org/5gbb8rkzn/linkedin_icon.jpg" alt="Visit Theodore&rsquo;s LinkedIn profile"...

CSS

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;
    }