如何让CSS hover放大动画仅作用于特定图片？

你当前的CSS用了全局的img选择器，这会匹配页面上所有<img>元素，所以不管图片是不是在.icon容器里，都会触发放大效果。

只需要把CSS选择器改成仅针对.icon下的图片，就能解决这个问题：

修改后的CSS代码：

.icon { }
.icon img {
  transition: transform .2s;
}
.icon img:hover {
  transform: scale(1.3);
}

你的HTML结构无需改动：

<div class="icon"><img src="general-media/icons/abt.png"></div>

这样设置后，只有放在.icon类div内的图片，在hover时才会触发放大效果，页面中其他图片不会受影响。

内容的提问来源于stack exchange，提问作者Throwaway7