Bootstrap 5.2下，如何实现带overlay的图片hover缩放效果？

问题核心：absolute定位的overlay覆盖在图片容器上方，导致鼠标hover事件无法触发到图片容器（.zoom-effect-1），进而无法触发图片放大动画。

解决方案 #

将hover触发目标从图片容器改为共同的父容器（.trip-card），这样只要鼠标进入卡片区域，无论hover在overlay还是图片上，都会触发图片的放大效果。

修改后的CSS代码 #

.trip-card {
  position: relative;
}

.trip-card img {
  border-radius: 30px;
}

.overlay {
  position: absolute;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(66, 66, 66, 0.525);
  /* 若overlay不需要交互，可添加pointer-events: none; 让事件穿透到下方元素 */
  /* pointer-events: none; */
}

.zoom-effect-1 {
  overflow: hidden;
}

.zoom-effect-1 img {
  border-radius: 30px;
  transform: scale(1);
  -webkit-transform: scale(1);
  transition: all .4s linear;
  -webkit-transition: all .4s linear;
  -moz-transition: all .4s linear;
  -o-transition: all .4s linear;
}

/* 修改hover触发目标为父容器.trip-card */
.trip-card:hover .zoom-effect-1 img {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}

.effect-image-1 {
  border-radius: 30px;
  position: relative;
  display: block;
}

说明 #

1. 原代码中.zoom-effect-1:hover img仅在鼠标直接hover到图片容器时触发，但overlay遮挡后，hover事件被overlay捕获，无法传递到图片容器。
2. 改为.trip-card:hover .zoom-effect-1 img后，只要鼠标进入.trip-card的范围，就会触发图片的放大动画，完美解决overlay遮挡的问题。
3. 如果overlay不需要任何交互（比如点击、文本选中），可以给.overlay添加pointer-events: none;，让鼠标事件直接穿透到下方的图片容器，此时也可以保留原有的.zoom-effect-1:hover img写法，但父容器hover的方式兼容性和适用性更强。

原HTML代码（无需修改） #

<body>
  <div class="trip-card p-4 col-12 col-md-6 col-lg-4 col-xl-3 ">
    <div class="effect-image-1 zoom-effect-1">
      <img src="https://picsum.photos/200" class="w-100" />
    </div>
    <div class="overlay text-white d-flex justify-content-center align-items-center m-4">
      <div>
        <h3 class="text-center">Trip Name</h3>
        <p>2 Oct 2022 - 22 Oct 2022</p>
      </div>
    </div>
  </div>
</body>

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