Angular图片Hover时居中显示加号图标异常，求排查问题

核心问题分析 #

你的代码存在两个关键问题，导致hover时加号图标无法正常显示在图片中间：

1. 父容器缺失相对定位：.image-container未设置position: relative，导致.plus-icon的绝对定位基准是整个页面，而非图片容器，无法定位到图片区域内。
2. 显示逻辑不合理：初始给.plus-icon设置display: none，hover时切换为display: block——display属性不支持平滑过渡，且结合定位错误，直接导致图标无法按预期出现。

具体修复步骤 #

1. 修正图片容器的定位规则 #

在SCSS的.image-container样式中添加相对定位，让子元素的绝对定位基于该容器：

.image-container {
  position: relative; /* 新增：为子元素定位提供基准 */
  width: 200px;
  height: 200px;
  overflow: hidden;
}

2. 调整加号图标的显示逻辑与定位 #

改用opacity控制显示隐藏，同时通过transform实现精准居中，并添加过渡动画提升体验：

.plus-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 基于自身尺寸精准居中 */
  font-size: 48px;
  color: white;
  opacity: 0; /* 初始隐藏 */
  transition: opacity 0.3s ease; /* 添加平滑过渡 */
  pointer-events: none; /* 避免干扰图片的hover触发 */
}

.image-container:hover .plus-icon {
  opacity: 1; /* hover时显示图标 */
}

3. 可选优化：增强视觉对比 #

可以给hover状态的图片添加暗化效果，让加号图标更突出：

.image-container:hover img {
  filter: brightness(70%);
  transition: filter 0.3s ease;
}

修改完成后，鼠标hover图片容器时，加号会平滑地在图片正中间显示，同时图片暗化的效果也能进一步突出图标。

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