如何实现onMouseEnter触发时叠层图片的opacity平滑过渡效果

你现在的实现出现突兀跳变的核心原因是：
display 是离散二元属性，不支持CSS过渡效果，它只有「完全显示/完全隐藏」两种状态，不存在中间过渡值，浏览器无法计算切换过程的中间帧，所以切换display: none和display: block时会直接跳变。

核心思路是放弃用display控制显隐，改用支持过渡的连续属性opacity实现淡入效果，配合pointer-events控制透明状态下的交互拦截，再给目标属性加transition规则即可。

方案1：保留现有React状态控制逻辑 #

第一步：修改上层覆盖图CSS #

把原.overlay-image-1里的display: none、默认opacity:1删除，新增过渡相关配置：

.overlay-image-1 {
  background-image: url("/images/h1.png");
  object-fit: cover;
  background-size: cover;
  background-position: center;
  position:absolute;
  width:100%;
  height:100%;
  z-index:2;
  border-radius: 3px;
  /* 新增以下配置 */
  opacity: 0; /* 默认完全透明，视觉上隐藏 */
  transition: opacity 0.3s ease; /* 给opacity属性加300ms平滑过渡，时长、缓动函数可自行调整 */
  pointer-events: none; /* 透明状态下不拦截鼠标事件，避免影响下层元素交互 */
}

第二步：修改组件内联样式逻辑 #

删除原来切换display的逻辑，改为根据hover状态切换opacity和pointer-events：

<Grid 
  onMouseEnter={() => setHover(true)}
  onMouseLeave={() => setHover(false)}
  style={imageOne}
>
  <div 
    style={{
      opacity: hover ? 1 : 0,
      pointerEvents: hover ? 'auto' : 'none'
    }} 
    className='overlay-image-1'
  >
  </div>
</Grid>

方案2：纯CSS实现（更简洁，无需维护hover状态） #

如果不需要在hover时触发其他JS逻辑，可以完全去掉React的hover状态和鼠标事件，直接用CSS:hover伪类实现，代码更精简：

第一步：给容器加类名 #

给底层图片所在的Grid组件加个自定义类名，方便CSS定位：

<Grid 
  style={imageOne}
  className='image-card'
>
  <div className='overlay-image-1'></div>
</Grid>

第二步：补充CSS hover规则 #

.overlay-image-1 {
  background-image: url("/images/h1.png");
  object-fit: cover;
  background-size: cover;
  background-position: center;
  position:absolute;
  width:100%;
  height:100%;
  z-index:2;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
/* 容器hover时，上层图片淡入 */
.image-card:hover .overlay-image-1 {
  opacity: 1;
  pointer-events: auto;
}

如果想要更丰富的过渡效果，可以同时给transform属性加过渡，比如实现淡入+轻微上移的效果，只需要修改CSS即可：

.overlay-image-1 {
  /* 其他属性保留 */
  opacity: 0;
  transform: translateY(8px); /* 默认向下偏移8px */
  transition: all 0.3s ease; /* 监听所有可过渡属性 */
  pointer-events: none;
}
.image-card:hover .overlay-image-1 {
  opacity: 1;
  transform: translateY(0); /* hover时回到原位置 */
  pointer-events: auto;
}

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