CSS实现鼠标Hover时文本从底部向上滑入显示效果

需求说明 #

• 实现纯CSS交互效果：初始状态隐藏的元素，鼠标悬停在容器上时，从底部向上滑动到正常位置展示
• 预期效果参考：
• 现存问题：已实现基础上滑逻辑，但标题和下方描述文本间距过大，不符合参考效果，需要轻量无JS的实现方案
• 当前异常效果：

问题根源 #

原有代码存在两个核心问题导致间距异常：

1. 样式重复定义：.hebergements__content被两次声明样式，min-height:41.8rem和后续的height:50%规则冲突，内容区高度计算异常
2. 隐藏元素占位：初始状态的描述区仅设置了透明度为0，没有做溢出隐藏和高度约束，元素透明但仍占据文档流位置，把标题和底部内容撑开了额外间距

修复后完整代码 #

CSS代码 #

.hebergements__container {
  position: relative;
  display: flex;
  margin: auto;
  width: 30rem;
}
.hebergements__container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ccc;
  z-index: 1;
  transition: background 0.35s;
}
.hebergements__container:hover::before {
  background: rgba(0,0,0,0.4);
}
.hebergements__container > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hebergements__content {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: 2.5rem;
  color: #fff;
}
.hebergements__title {
  margin: 0 0 0.8rem 0;
  transform: translate3d(0, 20px, 0);
  transition: transform 0.35s ease;
}
.hebergements__desc {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  color: rgba(255,255,255,0.8);
  transform: translate3d(0, 20px, 0);
  transition: all 0.35s ease;
}
.hebergements__desc ul {
  margin: 0;
  padding-left: 1.2rem;
}
.hebergements__bottom {
  margin-top: 0.8rem;
  transform: translate3d(0, 20px, 0);
  transition: transform 0.35s ease;
}
.hebergements__pension {
  font-size: 1rem;
  margin: 0;
}
/* 悬停触发样式 */
.hebergements__container:hover .hebergements__title,
.hebergements__container:hover .hebergements__desc,
.hebergements__container:hover .hebergements__bottom {
  transform: translate3d(0, 0, 0);
}
.hebergements__container:hover .hebergements__desc {
  max-height: 200px;
  opacity: 1;
  transition-delay: 0.05s;
}

HTML代码 #

<div class="container product-hebergements"> 
  <div class="hebergements__container">
    <img src="https://tympanus.net/Development/HoverEffectIdeas/img/12.jpg" alt="住宿展示图"/>
    <div class="hebergements__content">
      <h2 class="hebergements__title">
        Votre séjour en Club
      </h2>
      <div class="hebergements__desc">
        <ul>
          <li>En chambre ou en appartement</li>
          <li>Capacité à partir de 2 personnes jusqu'à 10 personnes.</li>
          <li>Formule pension demi pension inclus</li>
          <li>Profitez des activités...Services</li>
        </ul>
      </div>
      <div class="hebergements__bottom">
        <div class="hebergements__pension">
          8 jours/7 nuits . Pension complète. Prix par pers.
        </div>
      </div>
    </div>
  </div>
</div>

实现说明 #

• 整体无任何JS依赖，纯CSS实现，代码体积轻量
• 初始状态描述区通过max-height:0+overflow:hidden+opacity:0完全隐藏，不占据布局空间，从根源解决间距异常问题
• 所有文本元素统一做Y轴位移动画，悬停时描述区增加0.05s延迟，形成依次上滑的层次感，和参考效果交互一致
• 移除了原有代码中重复冲突、未被使用的冗余样式规则，减少不必要的样式覆盖

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