CSS -只需要图像大小(而不是文本)增加悬停

Question

链接到网站

如果你访问首页的服务部分(有网站设计、平面设计、搜索引擎营销和WordPress转换图标)，你会注意到，当你将鼠标悬停在它们上面时，它们下面的图像和文本会增加大小。但我只是希望图像大小增加(不是文本)。当前定义服务区域大小(不带hover和带hover)的CSS是:

.service-icon img {
    width: 100px;
    height:95px;
}
.service-icon img:hover{
    width: 110px !important;
    height:100px !important;
}

"service-icon"类应该只应用于图标，那么为什么文本也会响应呢?

我还尝试将此样式应用到特定的图像类:

/*.service-icon img:hover{
    width: 110px !important;
    height:100px !important;
}*/
.attachment-post-thumbnail, .size-post-thumbnail, .wp-post-image:hover {
width: 110px !important;
height: 100px !important;
}

但是它没有给我任何结果-图像/字体大小根本没有增加。在这一点上，我不知道还能尝试什么。这是一个自定义主题的WordPress网站，你会注意到图像最初是用CSS3动画插件动画的。谢谢你的建议。

EDIT:更新CSS:

.service-icon img {
    width: 100px;
    height:95px;
}
.service-icon img:hover{
    transform: scale(1.1);
}
/*.service-icon img:hover{
    width: 110px !important;
    height:100px !important;
}
.attachment-post-thumbnail, .size-post-thumbnail, .wp-post-image:hover
{
    width: 110px !important;
    height: 100px !important;
}
*/   

Answer 1

使用transform: scale()

.service-icon img {
    width: 100px;
    height:95px;
}
.service-icon img:hover{
    transform: scale(1.1);
}

样本片段

img:hover {
  transform: scale(1.1);
}

<img src="http://placehold.it/200x100/f00" alt="image">
<br>
Hey there, I'm not moving