设置.random-category-img的height:100%后鼠标移动时文本消失问题求助

• 你给.random-category-title设置了position: absolute，但它的父元素.random-category没有设置position: relative，导致文本是相对于整个页面定位，不是相对于卡片定位，交互触发卡片缩放时文本位置就会偏移甚至移出卡片区域。
• 图片添加height: 100%后渲染层级高于文本，导致文本被覆盖不可见。
• 图片缺少object-fit规则，铺满父容器时会出现拉伸变形的问题。

直接替换对应的CSS代码即可，不需要修改HTML结构就能实现预期效果：

.random-category, .random-categories-container,
.random-categories-loop {
    display: grid;
    z-index: 1;
}

.random-categories-container {
    padding: 20px 0 0;
    grid-template-rows: 2fr 1fr;
}

.random-categories-loop {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
    z-index: 1;
}

.random-category {
    font-size: 24px;
    place-items: center;
    background: black;
    border-radius: 20px;
    transition: 0.3s ease-in-out;
    overflow: hidden;
}

.random-category-img {
    width: 100%;
    height: 100%;
    opacity: 0.6;
    border-radius: 20px;
    object-fit: cover;
    grid-area: 1/1/-1/-1;
}

.random-category:hover {
    transform: scale(1.05);
}

.random-category-title {
    grid-area: 1/1/-1/-1;
    color: #fff;
    z-index: 2;
}

核心修改点说明 #

1. 移除了.random-category-title的position: absolute规则，改用grid原生的grid-area让图片和文本处于同一个网格单元格，天然实现堆叠效果，完全避免定位偏移问题。
2. 给图片添加object-fit: cover，保证铺满黑色背景的同时不会拉伸变形。
3. 给文本添加z-index: 2，确保始终显示在图片上层。
4. 给卡片添加overflow: hidden，避免图片放大时溢出圆角边界。

内容的提问来源于stack exchange，提问作者Стопчак Олег