如何实现鼠标悬停时文字从底部滑入并固定初始文本？

DevOps 小满

2026-8-2

问题解决：实现文本固定初始状态+悬停底部滑入效果

原代码核心问题是定位逻辑错误、动画触发条件不合理，以下是修正后的实现方案：

关键调整点

给.product-box添加position: relative，让内部绝对定位元素以它为参考容器
重构.middle的初始状态：默认隐藏在容器底部，配置过渡动画参数
调整hover触发逻辑，通过父容器hover统一控制文字滑入和图片效果

完整代码

CSS

.container {
  padding: 1em 0;
  float: left;
  width: 50%;
}

.product-box {
  position: relative; /* 核心：作为绝对定位的父参考容器 */
  overflow: hidden;
  margin-top: 20px;
}

.image1 {
  display: block;
  width: 100%;
  height: auto;
  transition: all 0.8s linear; /* 统一图片过渡动画时长 */
}

.middle {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgb(30, 30, 36);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: rgb(246, 244, 234);
  margin: 0;
  padding: 10px 0; /* 增加内边距优化文字显示 */
  text-align: center;
  /* 初始状态：完全隐藏在容器底部 */
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

/* 父容器hover时的联动效果 */
.product-box:hover .image1 {
  transform: scale(1.04);
  opacity: 0.5;
}

.product-box:hover .middle {
  /* 滑入效果：回到容器底部位置 */
  transform: translateY(0);
  opacity: 1;
}

HTML

<div class="container">
  <div class="product-box">
    <img src="https://phpmysqlappdiag454.blob.core.windows.net/blob/assets/images/hotelkos/Rectangle 14.png" alt="Suites" class="image1">
    <div class="middle">
      <p>Suites</p>
    </div>
  </div>
</div>