如何实现div内图片hover时滚动切换的悬停交互效果

动效通用名称 #

这类悬停时上层内容上移移出、下层内容同步上移接续显示的效果，行业内通用叫法是垂直位移悬停切换（Vertical Slide Hover Transition），属于双图层同步位移动效的范畴，你提到的站点按钮、菜单交互都是基于这个逻辑实现的，只是把图片换成了文字内容。

原有代码的问题 #

你的代码没有实现预期效果，核心问题有3个：

• 触发对象错误：把:hover事件绑在了单张图片上，还写了无效的后代选择器——.wrapper .image-back:hover .wrapper的逻辑是选中image-back元素内部的wrapper元素，但wrapper是image-back的父级，这个选择器完全不会生效
• 初始状态缺失：没有给背景图设置初始位置，默认状态下背景图和前景图重叠，无法实现从下方滑入的效果
• 交互逻辑漏洞：如果只在前景图上绑定悬停事件，图片位移离开鼠标位置后会反复触发hover/移出状态，出现动效闪烁的问题，正确的做法是把悬停触发绑定在外层容器上。

可直接运行的实现代码 #

CSS样式 #

.wrapper{
  position: relative;
  overflow: hidden;
  width: 500px;
  height: 300px;
  cursor: pointer;
}
.wrapper img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s ease-in-out;
}
/* 初始状态：背景图放在容器可视区域外的下方 */
.image-back{
  transform: translateY(100%);
}
/* 悬停容器时，两张图同步向上位移 */
.wrapper:hover .image-front{
  transform: translateY(-100%);
}
.wrapper:hover .image-back{
  transform: translateY(0);
}

HTML结构 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滑动悬停效果</title>
</head>
<body>
  <div class="wrapper">
    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=500&q=60" alt="后置图片" class="image-back">
    <img src="https://images.unsplash.com/photo-1648737119359-510d4f551382?auto=format&fit=crop&w=500&q=60" alt="前置图片" class="image-front">
  </div>
</body>
</html>

扩展适配 #

如果要复现按钮、菜单项的同款文字滑动效果，只需要把代码里的两个img标签替换成包裹文字的div即可，逻辑完全一致：初始状态下第二层文字放在容器下方，悬停容器时第一层文字上移移出、第二层文字上移进入可视区。如果要更接近参考站点的丝滑质感，可以把过渡的缓动函数替换为cubic-bezier(0.33, 1, 0.68, 1)，动效会更自然。

内容的提问来源于stack exchange，提问作者Shayan Kanwal