CSS实现链接悬停显示图片时的opacity淡入效果

你当前的淡入效果不生效，核心原因是display: none到display: block的状态切换是无过渡的跳变逻辑，CSS transition无法对display属性的变化做插值动画，哪怕给图片设置了opacity和transition属性，也不会触发平滑过渡效果。另外原有代码还有定位bug：悬停时才给图片容器加绝对定位，且父容器没有设置定位基准，会导致图片位置偏移。

把显隐控制逻辑从display切换改成opacity + visibility组合控制，同时修正定位逻辑，具体修改点如下：

• 给外层容器#container加position: relative，作为内部绝对定位图片的定位基准
• 图片容器span默认就设置好绝对定位属性，初始状态设为完全透明、不可见，同时给opacity加1秒过渡效果
• 悬停时只需要把span的opacity改为1、设为可见即可，不需要切换display属性
• 删掉原有给img标签加的多余opacity、transition规则，过渡效果加在图片父容器上即可

CSS部分 #

#container { 
  width: 100%; 
  margin-top: 0px; 
  height: auto; 
  float: left; 
  font-size: 30px; 
  padding-bottom: 4px; 
  border: 1px solid green;
  position: relative; /* 新增：作为内部绝对定位元素的基准 */
}

#container a { 
  float: left; 
  color: #ff4d00; 
  text-decoration: none; 
  height: auto; 
  margin-top: 0px; 
}

/* 修改悬停样式：只控制透明度和可见性 */
#container a:hover span { 
  opacity: 1;
  visibility: visible;
}

/* 修改默认span样式：默认透明隐藏，预设定位和过渡 */
#container a span { 
  position: absolute;
  top: 20%; 
  left: 10%; 
  right: 10%; 
  bottom: 20%;
  opacity: 0;
  visibility: hidden;
  z-index: 4; 
  margin: 0;
  transition: opacity 1s ease; /* 淡入过渡效果 */
} 

.center { 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: auto; 
}

HTML部分（原有结构可直接复用，无需修改） #

<div id="container">  
  <a href="Project 1.html">
    <p>Project 1.</p><br>
    <span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000g" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
    </span>
  </a>
  <a href="Project 2.html">
    <p>Project 2.</p>
    <span><img src="https://images.unsplash.com/photo-1629197520635-16570fbd0bb3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Z3JlZW4lMjB0ZXh0dXJlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
    </span>
  </a>
  <a href="Project 3.html">
    <p>Project 3.</p>
    <span><img src="https://img.freepik.com/photos-gratuite/mur-beton-blanc_53876-92803.jpg?w=2000" class="center" width="100%" height="100%" margin-top="25px" margin-bottom="25px"/>
    </span>
  </a>
</div>

• 搭配visibility: hidden而不是只用opacity:0，是因为透明状态的元素默认还是会拦截鼠标事件，加上visibility隐藏后，元素在透明状态下不会响应交互，和原有display:none的交互表现一致
• 过渡的时长、缓动函数可以自行调整，比如把1s ease改成0.5s linear就是0.5秒线性淡入
• 这套写法会自动生效鼠标移开时的平滑淡出效果，体验比原来的display直接切换更好

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