CSS

Question

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

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

"service-icon" class 应该只适用于图标，那么为什么文本也有响应？

我也试过将这种风格应用到具体的图像中class:

/*.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

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

CSS - Need Only Image Size (Not Text) To Increase On Hover

html

wordpress

hover

animate.css