如何在CSS中实现Hover触发的图片视差效果且不破坏布局对齐？

我来帮你搞定这个视差效果！核心问题是要让背景图移动时不破坏原有布局对齐，关键在于利用容器的溢出隐藏和合理的图片尺寸设置。先看你现有代码的小问题：直接移动背景图会导致它超出容器边界或者留白，我们来调整一下：

修正后的完整代码 #

<div id="outter-image">
  <div class="tilt-box">
    <div class="tilt-bg-image-box">
      <img class="bg-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/tecnam_bg.webp" />
    </div>
    <img class="overlay-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/webp/Tecam_recent_mockup-min.webp" />
  </div>
</div>

#outter-image {
  position: relative;
  overflow: hidden; /* 外层容器隐藏溢出，锁定布局边界 */
  width: 100%;
  max-width: 800px; /* 可根据你的实际布局调整宽度 */
}

.tilt-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9; /* 固定容器比例，避免图片变形 */
}

.tilt-bg-image-box {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 隐藏背景图溢出部分 */
  transition: transform 0.6s ease-in-out, opacity 0.5s;
}

.bg-image {
  width: 110%; /* 让图片比容器宽10%，左移后仍能填满容器 */
  height: 100%;
  object-fit: cover; /* 保持图片比例，铺满容器 */
  transition: transform 1s 0.4s linear, opacity 0.5s;
}

.overlay-image {
  position: absolute;
  top: -20px;
  right: -20%;
  width: 60%;
  aspect-ratio: auto 299 / 566;
  height: 120%;
  transition: transform 0.6s ease-in-out, opacity 0.5s;
  opacity: 0;
  transform: perspective(1000px) rotateY(-60deg);
}

/* Hover触发的视差效果 */
.tilt-box:hover .bg-image {
  transform: translate3d(-8%, 0, 0); /* 左移8%，因图片宽110%，不会留白 */
}

.tilt-box:hover .overlay-image {
  opacity: 1;
  transform: perspective(1000px) rotateY(-20deg);
}

.tilt-box:hover .tilt-bg-image-box {
  transform: perspective(1000px) rotateY(20deg);
}

关键调整说明 #

• 溢出隐藏锁边界：给#outter-image和.tilt-bg-image-box都加上overflow: hidden，背景图左移时超出容器的部分会被隐藏，完全不会破坏布局对齐。
• 图片宽度预留空间：把.bg-image的宽度设为110%，这样左移-8%后，图片依然能完全覆盖容器，不会出现空白区域。
• 容器比例固定：给.tilt-box加上aspect-ratio，确保容器保持固定比例，避免图片变形或布局错乱。
• 统一过渡规则：移除了重复的transition定义，避免动画时序冲突，让hover效果更流畅自然。

这样调整后，hover时背景图会向左轻微移动模拟视差，同时完全保持在布局的对齐位置里，和你参考的网站效果一致！

内容的提问来源于stack exchange，提问作者Jay Singh Chauhan