Backround Image is shifted slightly downwards in hover

Site URL: https://rabbit-plum-alma.squarespace.com/

Site Password: 1234

The idea is that when you hover your cursor over this section, the background image is replaced.

I was able to do this, but for some reason the second image is shifted slightly downwards.

How do fix this?

Thank you in advance!

I have attached the basic code below:

// COLOSSEUM TRANSITION //
section[data-section-id="6294e65c9d0b6f21a530ba11"]{
  .section-background-overlay{
      background-image: url(https://static1.squarespace.com/static/6294e6569d0b6f21a530b83d/t/6294e7cf11a02a12de9ccf78/1653925847362/untitled.png) !important;
        background-size: cover;
      transition: opacity ease-in-out .9s;
        opacity: 0 !important;
}

  &:hover .section-background-overlay{
      transition: all ease-in-out .9s ;
    opacity: 100 !important;
    background-size: cover;
    //position: fixed;
    background-image: url(https://static1.squarespace.com/static/6294e6569d0b6f21a530b83d/t/6294e7cf11a02a12de9ccf78/1653925847362/untitled.png) !important;
  }
}

It looks fine to me. Did you solve this? Can you share solution?

9 hours ago, tuanphan said:

It looks fine to me. Did you solve this? Can you share solution?

No. In full-screen mode, from the user's view. The problem remains, my screen resolution is Full HD. 
Still asking for help!