CSS卡片悬停效果问题：标题与内容背景无法铺满区域底部

核心思路 #

通过绝对定位将内容背景区域固定在卡片底部，确保背景始终铺满卡片底部；利用CSS过渡实现悬停时内容上移的动画效果。

具体代码修改 #

1. 调整卡片容器的定位与溢出控制：

.item {
  position: relative; /* 让内部绝对定位元素以卡片为参照 */
  overflow: hidden; /* 防止悬停时内容溢出卡片 */
  height: 300px; /* 可根据需求设置固定高度，或由内容自适应 */
}

2. 重构内容背景区域的样式：

.item-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 1.5rem;
  transition: transform 0.3s ease-in-out;
  transform: translateY(0); /* 默认状态下贴紧卡片底部 */
}

3. 添加悬停时的上移效果：

.item:hover .item-desc {
  transform: translateY(-30px); /* 上移距离可根据需求调整 */
}

说明 #

• 绝对定位的.item-desc会自动铺满卡片的左右宽度，并固定在底部，确保背景始终延伸至卡片底部边缘。
• overflow: hidden用于隐藏悬停时内容上移后可能超出卡片的部分，保持卡片布局整洁。
• 若卡片高度需要自适应，可移除.item的固定height，改为由内部图片或内容撑开，但需确保图片设置width: 100%; height: auto;来维持比例。

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