如何实现图片上方文字区域悬停时仅图片触发缩放过渡效果？

核心思路 #

借助父容器的:hover状态控制图片缩放，同时保留文字的正常交互能力。父容器包含图片和文字后，鼠标悬停在容器内任意区域（包括文字）都会触发容器的hover状态，进而让图片执行缩放过渡，文字则保持原有可选中复制的特性。

具体实现步骤 #

1. 给图片和文字添加共同的父容器（比如<div class="image-container">）
2. 移除图片自身的:hover样式，改为监听父容器的:hover来触发图片缩放
3. 文字元素保留默认的pointer-events属性，不设置none，确保能正常选中复制

代码示例 #

HTML结构：

<div class="image-container">
  <img src="your-image-url" class="target-image" />
  <span class="overlay-text">图片上方的文字内容</span>
</div>

对应的CSS修改：

.image-container {
  position: relative;
  /* 根据需求设置容器尺寸 */
  width: 400px;
  height: 300px;
}

.target-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out; /* 保留过渡动画 */
}

/* 父容器hover时触发图片缩放 */
.image-container:hover .target-image {
  transform: scale(1.08);
}

.overlay-text {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: #fff;
  font-size: 1.2rem;
  /* 不设置pointer-events:none，保留文字选中复制功能 */
}

方案优势 #

• 无论鼠标悬停在图片还是文字区域，都能触发图片的缩放效果
• 文字可正常被选中、复制，完全保留原有交互性
• 缩放过渡仅作用于图片，文字不会跟随变形，完全匹配需求

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