CSS实现图片Hover时分数覆盖层淡入效果的问题求助

我看了你的代码和场景，问题其实出在几个关键的细节处理上，咱们一步步来修正：

核心问题分析 #

• 你把过渡效果只加在了hover状态下，覆盖层的初始状态没有设置默认透明度和过渡规则，导致动画方向完全反了
• 覆盖层的定位没有绑定到父容器，导致位置偏移到了页面其他区域
• hover时设置的opacity: 0.1是让元素变透明，和你想要的「从透明到显示」的淡入效果刚好相反

修改后的完整实现 #

HTML（结构保持不变） #

<div class="profile-image10">
    <a href="#"><img src="https://www.w3schools.com/howto/img_fjords.jpg" /></a>
    <span class="overlay"></span>
</div>

CSS（关键修改点标注） #

/* 给父容器设置相对定位，让子元素的绝对定位基于它 */
.profile-image10 {
    position: relative;
    display: inline-block; /* 让容器自适应图片宽度 */
}

/* 覆盖层初始状态：完全透明，提前设置过渡效果 */
.profile-image10 .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0; /* 相对于父容器左上角定位，替代你之前的固定偏移值 */
    top: 0;
    z-index: 2;
    background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
    background-size: cover; /* 让分数图填满整个容器 */
    opacity: 0; /* 默认隐藏 */
    /* 把过渡规则放在初始状态，确保移入/移出都有平滑动画 */
    -webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -ms-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}

/* hover时让覆盖层完全显示 */
.profile-image10:hover .overlay {
    opacity: 1;
}

改动说明 #

1. 父容器加position: relative：解决了覆盖层位置偏移的问题，让absolute定位的覆盖层以图片容器为基准，而不是整个页面
2. 覆盖层初始opacity:0：默认完全隐藏，hover时切换为opacity:1，刚好实现从透明到可见的淡入效果
3. 过渡效果移到初始状态：这样鼠标移入和移出时，覆盖层都会有平滑的过渡动画，只放在hover状态的话，只有移出时会有动画
4. 添加background-size: cover：确保你的分数图片能适配容器大小，不会出现显示不全的情况

这样修改后，鼠标悬停图片时，分数覆盖层就会平滑淡入，移出时会平滑淡出，完全符合你的预期啦。

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