How to move image but not its position in CSS

Question

As you can see in the image attached, the airplane image is moving to left intentionally. But I don't want its position to move out of the alignment. I want to have something like parallax effect but on hover like this website is doing. https://digitalsilk.com/. I have just started website development.

I want to know how I can have these image transition from https://digitalsilk.com/. But I am not able to recreate that transition. I am having trouble with one thing that is moving the back airplane image a little to the left without moving its position (like a parallel effect) You can see the main page gallery of the website attached in desktop view.

<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

The trick is to set the width to the image wrapper and overflow:hidden.

I know the picture of plane is cut of a bit. You need to scale the picture and position it a little bit different. Or change the picture itself.

When I checked your code, I would recomand you also to wrap everything to some wrapper with fixed size. It doesnt look like you expected on full screen.

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