Jump to content

Backround Image is shifted slightly downwards in hover

Recommended Posts

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

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.