解决图片Hover放大时叠加文字消失的前端布局问题

嘿，我来帮你搞定这个问题！你遇到的文字消失情况，根源在于图片的堆叠层级和hover触发的堆叠上下文变化：

• 你的HTML里，<img>在<h3>之后，默认情况下图片的堆叠层级比标题更高
• 当给图片添加transform: scale(1.2)时，会创建一个新的堆叠上下文，让图片的层级进一步提升，直接把标题完全盖住，看起来就像文字消失了。

下面给你两种简单的解决方案，推荐第二种，体验更流畅：

方案一：给标题设置更高的堆叠层级 #

直接修改.card_body-title的CSS，添加z-index确保它永远在图片上方：

.card_body-title{
    position: absolute;
    bottom: 24px;
    left: 10px;
    z-index: 1; /* 新增这一行，让标题在图片上层 */
}

这样即使图片放大，标题也会一直显示在最前面。

方案二：把Hover事件绑定到整个卡片（更推荐） #

这个方案不仅能解决文字消失的问题，还能让用户hover整个卡片区域都触发放大效果，体验更友好：

1. 修改CSS里的hover触发对象，从.card_img:hover改成.card_body:hover .card_img
2. 给标题加上z-index（可选，但能更稳妥地确保层级）

修改后的完整CSS代码：

.cards{
    display: flex;
    margin-top: 100px;
}

.card_body{
    position: relative;
    width: 30%;
    margin: 20px; 
    color:antiquewhite;
    overflow: hidden;
    border-radius:20px;
}

.card_img{
    transition: all 800ms ease-out;
    width: 100%;
    border-radius:20px;
}

/* 把hover绑定到父元素.card_body，扩大触发范围 */
.card_body:hover .card_img{
    transform: scale(1.2);
}

.card_body-title{
    position: absolute;
    bottom: 24px;
    left: 10px;
    z-index: 1; /* 确保标题始终在图片上层 */
}

这样调整后，不管你hover卡片的哪个部分（包括标题区域），图片都会平滑放大，而且标题会一直清晰显示在图片上方，完美解决你的问题！

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