如何使用:hover伪类实现重叠图片的缩放交互效果？

问题出在哪 #

1. 选择器逻辑错误：你写的.art img:hover .scale.left是想选中hover状态下img的子元素，但.scale.left是img自身的类，这个选择器根本匹配不到元素。
2. 缺少shirt类的缩放逻辑：原代码没写shirt图片在hover时缩放到0的样式和过渡效果。
3. 触发范围不对：需求是悬停任意图片都触发效果，应该把触发点放到父容器.grid-container上，这样不管悬停shirt还是art的图片，都能触发整体的样式变化。

修正后的代码 #

CSS部分

.grid-container {
  display: grid;
}

.grid-container > * {
  grid-area: 1/1;
  /* shirt和art层叠在一起 */
  display: grid;
  grid-auto-flow: column;
  /* 列布局，可添加任意数量图片 */
  grid-auto-columns: 1fr;
  /* 等宽列 */
  place-items: center;
  /* 居中所有元素 */
}

.shirt img {
  max-width: 90%;
  /* 控制shirt图片宽度 */
  transition: transform 400ms cubic-bezier(.25, .46, .45, .94);
  /* 添加过渡动画 */
}

.art img {
  max-width: 50%;
  /* 控制art图片宽度 */
  transition: transform 400ms cubic-bezier(.25, .46, .45, .94);
  /* 添加过渡动画 */
}

/* 悬停时shirt图片缩放到0 */
.grid-container:hover .shirt img {
  transform: scale(0);
}

/* 悬停时art图片放大，不同位置的图片可设置不同缩放比例 */
.grid-container:hover .art .scale.left {
  transform: scale(1.3);
}

.grid-container:hover .art .scale.mid {
  transform: scale(1.4);
}

.grid-container:hover .art .scale.right {
  transform: scale(1.3);
}

HTML部分（无需修改，直接使用即可）

<div class="grid-container">
  <div class="shirt">
    <img src="https://i.imgur.com/oS8QWPI.png">
    <img src="https://i.imgur.com/oS8QWPI.png">
    <img src="https://i.imgur.com/oS8QWPI.png">
  </div>
  <div class="art">
    <img src="https://i.imgur.com/jeNzULX.png" class="scale left">
    <img src="https://i.imgur.com/jeNzULX.png" class="scale mid">
    <img src="https://i.imgur.com/jeNzULX.png" class="scale right">
  </div>
</div>

关键修改说明 #

• 给.shirt img和.art img都加上了过渡属性，保证缩放过程平滑自然。
• 使用.grid-container:hover作为触发条件，只要鼠标悬停在容器内的任意图片（或区域），就会触发样式变化，完全符合需求。
• 针对不同位置的art图片（left/mid/right）设置了不同的缩放比例，你可以根据视觉需求随意调整数值。
• 移除了无效的选择器，替换为能正确匹配目标元素的规则。

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