html - 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”类应该只适用于图标，那么为什么文本也有响应呢？

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

/*.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);
}

示例片段

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

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