在图像悬停上的社交图标期间出现扭曲的图像

Question

我已成功将社交图标应用于我的图片，因此它们使用CSS显示为内嵌。我的目标是，一旦用户将鼠标悬停在关联的图像上，就会出现。但是，我的问题是，当我尝试编写CSS hover时，我会在图像上出现扭曲的图标版本，但图标的较小版本确实出现悬停。这是我的CSS：

#share-icon img:hover
{
   width: 35px;
   padding: 5px;
   border: 0;
   box-shadow: 0;
   margin-left: 75px;
   display: inline;
   visibility: visible;
}

以下是我应用于图像的代码示例：

<div id="share-icon">
                <!-- Facebook Share -->
                <a href="https://www.facebook.com/sharer.php?u=http://example.com" target="_blank">
<img src="http://www.simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" /></a>
</div>

如果我删除:hover，那么我当然会丢失图像悬停上的显示。任何人都可以帮我弄清楚为什么会出现扭曲的图标，而较小的图标会出现在hover上吗？我会写一个内联，但我知道你只能使用CSS或JS。如果有人可以帮助解决方案，我将不胜感激。