如何实现卡片内容悬停上滑且维持内容定义的高度？

我明白你的需求：要实现卡片内容悬停上滑显示，同时卡片高度能根据内容自动调整，还要让图片作为背景用background-size: cover覆盖整个卡片。之前用绝对定位导致高度塌陷，是因为绝对定位元素脱离了文档流，父元素无法感知它的高度。下面是具体的解决办法：

关键修改思路 #

1. 让.card-hover保留在文档流中：使用position: relative代替绝对定位，这样父元素.card会自动根据.card-hover的内容高度自适应。
2. 用transform实现上滑动画：默认状态下将.card-hover向下移出可视区域（transform: translateY(100%)），悬停时恢复原位（transform: translateY(0)），配合opacity实现渐显效果。
3. 保证背景图覆盖整个卡片：.card设置position: relative，背景图会自动覆盖由内容撑开的整个高度。

修改后的完整代码 #

HTML（无需改动，保持你原来的结构即可） #

<section class="people"> 
  <div class="row no-gutters justify-content-center"> 
    <div class="col-12 col-md-6 col-lg-4"> 
      <div class="card" style="background-image: url('https://via.placeholder.com/600')"> 
        <div class="card-hover"> 
          <div class="card-body"> 
            <h4 class="card-title">Jane Doe</h4> 
            <h5 class="card-subtitle">Managing Director</h5> 
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu orci non erat eleifend pellentesque. Proin eleifend libero in risus viverra venenatis.</p> 
            <p class="card-text">Donec interdum turpis sit amet dapibus fringilla. Mauris volutpat suscipit ullamcorper. Sed elementum, odio sit amet molestie congue, arcu nunc tempus nisl, vel auctor tellus urna ac orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet eros elementum odio sagittis commodo.</p> 
            <p class="card-text">Vestibulum hendrerit aliquam nunc, vitae fermentum est finibus ac. Vivamus porta velit id tempus hendrerit.</p> 
          </div> 
          <div class="card-footer row no-gutters"> 
            <div class="col text-left p-0"> 
              <ul class="list-unstyled"> 
                <li><a href="#" class="card-link"><i class="fas fa-envelope fa-fw"></i>test@domain.com</a> </li> 
                <li><a href="#" class="card-link"><i class="fas fa-phone fa-fw"></i>+44 (0)123 456 7890</a></li> 
                <li><a href="#" class="card-link"><i class="fas fa-mobile fa-fw"></i>+44 (0)123 456 7890</a></li> 
              </ul> 
            </div> 
            <div class="col text-right p-0 align-self-end"> 
              <ul class="list-inline"> 
                <li class="list-inline-item m-0"> 
                  <a href="#"> 
                    <span class="fa-stack fa-stack-lg" style="vertical-align: top;"> 
                      <i class="far fa-circle fa-stack-3x"></i> 
                      <i class="fab fa-linkedin-in fa-stack-1x"></i> 
                    </span> 
                  </a> 
                </li> 
                <li class="list-inline-item m-0"> 
                  <a href="#"> 
                    <span class="fa-stack fa-stack-lg" style="vertical-align: top;"> 
                      <i class="far fa-circle fa-stack-3x"></i> 
                      <i class="fab fa-twitter fa-stack-1x"></i> 
                    </span> 
                  </a> 
                </li> 
              </ul> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</section>

SCSS（修改后的核心样式） #

.people {
  .card {
    position: relative; // 为内部元素提供定位参考
    background-size: cover;
    background-position: center top;
    color: #fff;
    width: 100%; // 确保卡片占满列宽

    .card-hover {
      position: relative; // 保持在文档流中，让父元素自适应高度
      width: 100%;
      background: rgba(0, 0, 0, 0.7);
      opacity: 0;
      transform: translateY(100%); // 默认向下移出可视区域
      transition: all 0.4s ease-in-out;

      &:hover {
        opacity: 1;
        transform: translateY(0); // 悬停时上滑至原位
      }

      .card-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;

        .card-title {
          font-size: 1.75rem;
          padding-bottom: 12px;
          margin-bottom: 1rem;
          &:before {
            left: 50%;
            margin-left: -30px;
          }
        }

        .card-subtitle {
          &:before {
            display: none;
          }
          margin-bottom: 1rem;
        }

        .card-text {
          font-weight: 300;
          font-size: 0.8125rem;
          text-align: left;
        }
      }

      .card-footer {
        border-radius: 0;
        border-top: none;
        padding: 10px 20px;
        background-color: transparent;

        li {
          a {
            color: #f1f1f1; // 修正原代码中少写的最后一个1
            i {
              color: #fff;
              margin-right: 5px;
            }

            .fa-stack-lg {
              height: 3em;
              line-height: 3em;
              width: 3em;
            }

            .fa-stack {
              i {
                color: #fff;
                &:hover {
                  color: #f1f1f1;
                }

                .fa-stack-3x {
                  font-size: 2.5rem;
                  left: 0;
                  position: absolute;
                  text-align: center;
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}

关键细节说明 #

• 避免高度塌陷：.card-hover使用position: relative，始终保留在文档流中，.card的高度会被.card-hover的内容自动撑开，完美适配不同长度的内容。
• 流畅动画：transform属性不会触发浏览器的重排操作，动画性能比使用top/margin更好，过渡效果更流畅。
• 背景图适配：background-size: cover会自动缩放背景图，覆盖由内容撑开的整个.card高度，不管内容长短都能保证图片显示完整且比例正确。
• 修正小错误：原代码中color: #f1f1f是笔误，已经修正为#f1f1f1，保证文字颜色正常显示。

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