CSS - 只需要图像大小（不是文本）在悬停时增加

Question

Link to Website

如果您访问首页的服务部分（带有网站设计、图形设计、搜索引擎营销和 WordPress 转换图标），您会注意到当您将鼠标悬停时，它们下方的图像和文本会变大在他们之上。但我只想增加图像大小（而不是文本）。当前定义服务区大小（不带和带悬停）的 CSS 是：

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

“服务图标”类应该只适用于图标，那么为什么文本也会响应？

我也尝试将此样式应用于特定的图像类：

/*.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 Animate-It 插件制作的。感谢您的建议。

编辑：更新的 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);
}

示例 sn-p

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

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