Jump to content

Backround Image is shifted slightly downwards in hover

Recommended Posts

Posted (edited)

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

screen1.png

screen2.png

Edited by unt1tled
Specified the password
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.