如何通过CSS Transition和Transform实现非悬停隐藏文本、悬停时平滑滑入显示的效果

嘿，完全可以只用CSS实现你要的效果，根本不用jQuery！我来帮你调整代码搞定这个需求，顺便给你理清楚关键细节：

首先，你核心的思路是对的——用transform: translateY()配合过渡动画控制元素的显示/隐藏，但有几个关键细节你没注意到，导致效果达不到预期：

核心修改点 #

• 容器溢出隐藏：必须给.photographer_caption加上overflow: hidden，这样非悬停时向下移出的文本就会被容器裁切掉，不会在页面上露出来，这是实现“隐藏”的核心！
• 修正布局逻辑：你之前用的margin-bottom: -20px容易导致布局混乱，建议改用padding来控制元素内部空间，让排版更稳定。
• 修复HTML结构：你原来的HTML标签嵌套有错误（比如span.caption的闭合位置不对），结构乱了CSS样式也会跟着出问题，得先理顺。

修改后的完整代码 #

HTML部分 #

<div class="figure">
  <img class="figure-image" src="https://placecats.com/poppy/300/200" alt="">
  <div class="photographer_caption">
    <svg xmlns="http://www.w3.org/2000/svg" width="16.758" height="14.364" viewbox="0 0 16.758 14.364">
      <path id="Path_15460" data-name="Path 15460" d="M27.386,26l-.9,2.394H24.394A2.389,2.389,0,0,0,22,30.788V37.97a2.389,2.389,0,0,0,2.394,2.394h11.97a2.389,2.389,0,0,0,2.394-2.394V30.788a2.389,2.389,0,0,0-2.394-2.394H34.269L33.371,26Zm2.992,4.189a4.189,4.189,0,1,1-4.189,4.189A4.2,4.2,0,0,1,30.379,30.189Zm0,1.8a2.394,2.394,0,1,0,2.394,2.394A2.38,2.38,0,0,0,30.379,31.985Z" transform="translate(-22 -26)" fill="#fff"/>
    </svg>
    <span class="caption">Caption Caption</span>
    <span class="photographer_name">摄影师名字</span>
  </div>
</div>

CSS部分 #

.figure {
  position: relative;
}

.figure-image {
  width: 100%;
  display: block; /* 去掉图片下方的默认空隙 */
}

.photographer_caption {
  position: absolute;
  bottom: 0;
  left: 15px;
  z-index: 100;
  display: flex;
  flex-direction: column; /* 让SVG和文本垂直排列 */
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  color: #fff;
  overflow: hidden; /* 关键：隐藏溢出的元素 */
}

.photographer_caption svg {
  background: #143c48;
  padding: 6px;
  width: 35px;
  height: 28px;
  margin-bottom: 10px;
}

.photographer_caption .caption,
.photographer_caption span.photographer_name {
  transform: translateY(100%); /* 非悬停时向下移出容器 */
  transition: .25s ease;
  background: #143c48;
  padding: 8px 12px; /* 用padding优化点击区域和排版 */
  width: 100%;
  text-align: center;
}

/* 悬停时把元素移回原位 */
.photographer_caption:hover .caption,
.photographer_caption:hover span.photographer_name {
  transform: translateY(0);
}

效果说明 #

• 非悬停状态：.caption和.photographer_name会被向下移出.photographer_caption容器，加上overflow: hidden后完全不可见，只有相机SVG显示在图片上。
• 悬停状态：鼠标放到相机SVG（或者整个.photographer_caption区域）时，文本会以0.25秒的平滑动画向上滑入，完全覆盖在图片下方，和你要的效果一致。

关于你问的z-index：你已经给.photographer_caption设了z-index:100，这个数值足够让它覆盖在默认z-index为0的图片上方，完全没问题，不需要额外调整啦~

内容来源于stack exchange