如何实现卡片Hover时描述文本的平滑滑动过渡效果？

你的过渡效果失效主要有几个核心问题：父容器未设置相对定位、card-desc的height: 100%无法被浏览器计算过渡值，以及渐变遮罩未同步添加过渡动画。以下是修复后的完整代码：

修改后的CSS #

.feature-card {
  width: 100%;
  height: 400px;
  border-radius: 10px;
  background: url(''); /* 替换为你的背景图地址 */
  background-size: cover;
  padding: 0 !important;
  position: relative; /* 关键：让子元素absolute定位基于卡片容器 */
  overflow: hidden; /* 防止hover时内容溢出卡片 */
}

.feature-card .feature-card-content {
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  padding: 50px 30px 10px;
  background-image: linear-gradient(360deg, #000, transparent);
  width: 100%;
  border-radius: 0 0 10px 10px;
  transition: padding-bottom 0.5s ease, background-image 0.5s ease; /* 给遮罩和内边距加过渡 */
}

.feature-card .feature-card-content .card-desc {
  max-height: 0; /* 用max-height代替height，支持过渡计算 */
  transition: max-height 0.5s ease;
  overflow: hidden;
  margin-top: 15px; /* 增加标题与描述的间距 */
}

.feature-card:hover .feature-card-content {
  padding-bottom: 80px; /* 扩展底部内边距，让遮罩向上延伸 */
  background-image: linear-gradient(360deg, #000 60%, transparent); /* 加深并扩展渐变遮罩范围 */
}

.feature-card:hover .feature-card-content .card-desc {
  max-height: 100px; /* 设置足够容纳描述文本的max-height值 */
}

修改后的HTML（结构保持不变） #

<div class='col-md-12'>
  <div class='col-md-2 col-md-offset-1 feature-card'>
    <div class='feature-card-content'>
      <h3>Title</h3>
      <div class='card-desc'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</div>
    </div>
  </div>
</div>

关键改动说明 #

• 给.feature-card添加position: relative，确保.feature-card-content的绝对定位是相对于卡片容器，而非整个页面。
• 将card-desc的height改为max-height：浏览器无法对0到100%的height值计算过渡动画，但能识别max-height的数值变化，设置一个足够容纳描述文本的数值即可实现平滑展开。
• 给.feature-card-content添加padding-bottom和background-image的过渡，实现渐变遮罩随hover扩展的效果，同时调整渐变颜色占比，让遮罩在hover时覆盖更多区域。
• 添加overflow: hidden到.feature-card，避免hover时内容溢出卡片边界。

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