Question

如果您访问首页的服务部分（使用网站设计，平面设计，搜索引擎营销和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);
}

示例代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: