如何移动图像而不是其在 CSS 中的位置

Question

As you can see in the image attached，飞机图像故意向左移动。但我不希望它的位置移出对齐方式。我想要像视差效果这样的东西，但是像这个网站一样悬停。 https://digitalsilk.com/。我刚刚开始网站开发。

我想知道如何从https://digitalsilk.com/ 转换这些图像。但我无法重新创建这种过渡。我遇到了一个问题，就是将后飞机图像向左移动一点而不移动其位置（如平行效果）。您可以在桌面视图中看到附加的网站主页画廊。

<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>

<style>
  .overlay-image {
    top: -20px;
    right: -20%;
    position: absolute;
    width: 60%;
    aspect-ratio: auto 299 /566;
    height: 120%;
    transition: transform .6s ease-in-out, opacity .5s;
    opacity: 0;
    transform: perspective(1000px) rotateY( -60deg);
  }
  
  .tilt-bg-image-box {
    transition: transform .6s ease-in-out, opacity .5s, -webkit-transform .6s ease-in-out;
  }
  
  .bg-image {
    transition: transform 1s .4s linear, opacity .5s, -webkit-transform 1s .4s
  }
  
  .tilt-box:hover .bg-image {
    transform: translate3d(-8%, 0, 0);
  }
  
  .tilt-box:hover .overlay-image {
    opacity: 1;
    -webkit-transform: perspective(1000px) rotateY( -20deg);
    transform: perspective(1000px) rotateY( -20deg);
  }
  
  .tilt-box:hover .tilt-bg-image-box {
    transform: perspective(1000px) rotateY(20deg);
  }
  
  .tilt-box:hover .bg-image {
    transition: transform 4s .4s linear, opacity .5s, -webkit-transform 4s .4s
  }
</style>

Answer 1

诀窍是将width 设置为图像包装器和overflow:hidden。

我知道飞机的图片被剪掉了一点。您需要缩放图片并将其定位有点不同。或者更改图片本身。

当我检查您的代码时，我会建议您也将所有内容包装到具有固定大小的包装器中。全屏显示时看起来不像您预期​​的那样。

<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>

<style>
  .overlay-image {
    top: -20px;
    right: -20%;
    position: absolute;
    width: 60%;
    aspect-ratio: auto 299 /566;
    height: 120%;
    transition: transform .6s ease-in-out, opacity .5s;
    opacity: 0;
    transform: perspective(1000px) rotateY( -60deg);
  }
  
  .tilt-bg-image-box {
    width: 600px;
    height: auto;
    overflow: hidden;
    transition: transform .6s ease-in-out, opacity .5s;
  }
 
  .bg-image {
    transition: transform 1s .4s linear, opacity .5s;
  }
 
  .tilt-box:hover .bg-image {
    transform: translate3d(-8%, 0, 0);
  }
  
  .tilt-box:hover .overlay-image {
    opacity: 1;
    -webkit-transform: perspective(1000px) rotateY( -20deg);
    transform: perspective(1000px) rotateY( -20deg);
  }
  
  .tilt-box:hover .tilt-bg-image-box {
    transform: perspective(1000px) rotateY(20deg);
  }
  
  .tilt-box:hover .bg-image {
    transition: transform 4s .4s linear, opacity .5s;
  }
</style>