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

Posted 2023-05-08

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

【英文标题】：CSS - Need Only Image Size (Not Text) To Increase On Hover

【发布时间】：2017-03-06 17:03:02

【问题描述】：

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;

*/   

【问题讨论】：

使用transform: scale(1.1)

【参考方案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" >
<br>
Hey there, I'm not moving

【讨论】：

我在我编辑的 CSS（见上文）和类 .attachment-post-thumnbail、.size-post-thumbnail、.wp-post-image:hover 中尝试了 transform: scale(1.1) （目前已在编辑后的 ​​CSS 中注释掉）——但在这两种情况下都没有发生任何事情。

我在检查器 imgur.com/4mZWmWH 中看到“transform: scale(1.1)”的“无效属性值”

@HappyHands31 用一个示例更新了我的答案，显示它确实有效，如果你没有，你错过了一些东西。

@HappyHands31 在您的问题编辑中，您拼错了transform，希望不在您的代码中

哦，是的，就是这样 :) 谢谢！