"Rollover" Social Media Icons for HTML E-mail

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

HTML

<body style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; font-size: 100%; width: 100%; height: 100%;">
    
    <a href="skype:theodore-carrigan-broda?chat" title="Chat with me on Skype" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width:195px;  height: 42px; cursor: pointer;">
      <img class="base" src="http://images.click.tommy.com/images/lg_images/calv/CK_Oreder_Confirmation/btn-track.png" alt="Chat with Theodore on Skype" align="left" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 195px; height: 42px;" />
      <img class="roll" src="http://images.click.tommy.com/images/lg_images/calv/CK_Oreder_Confirmation/btn-track-hover.png" alt="Chat with Theodore on Skype" align="left" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; text-decoration: none; width: 195px; height: 0px;" />
    </a>
  </body>

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: 195px !important;
    height: 42px !important;
    display: inline !important;
    max-width: 195px !important;
    max-height: 42px !important;
    }