Html 如何在悬停时将背景图像移到远离边框的中心？

我正在编写代码，以便在将鼠标悬停在图像上时为背景图像设置边框。当我将鼠标悬停在图像上时，图像太靠近边界，我遇到了一个问题。我想将图像移动到中心，如下所示：

以下是JSFIDLE：

我已经尝试了以下每种方法：

padding-left: 4px;
background-position: center center;
background-position: 2px;
margin-left: 2px;

它不会做任何事情，因为当我在图像上悬停时，背景图像将保持在靠近边界的位置。我试图在谷歌上找到答案，但我找不到解决办法

以下是完整的代码：

.a8r{
边缘顶部：12px；
左边距：11px；
高度：28px；
宽度：28px；
边界：无；
显示：内联块；
}
.e1f600{
背景：无重复url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png)0-11223px；
}
.e1f600：悬停{
-webkit边界半径：2px；
边界半径：2px；
盒影：0 3px2pRGBA（0,0,0,15）；
宽度：32px；
高度：30px；
背景位置：中心；
}

改变背景位置

为元素提供背景色

以非悬停样式设置元素的大小

请分开看。这样你会更了解它。请随意优化或最小化它

.e1f600 { 
   background-image: url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png);
   background-position: center -11222px;
   background-repeat: no-repeat;
   background-color: transparent;
   width: 32px;
   height: 32px;
}

.e1f600:hover {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    box-shadow: 0 0 3px 2px rgba(0,0,0,.15);
}

---

非常感谢，我已经做了更改，但是当我做更改时，我可以看到背景中有一个灰色，背景图像将在悬停状态下移动。有什么想法吗？