Jump to content

Transparent scroll over

Recommended Posts

Hey there, 

I currently have css that allows a smooth scrolling overlay on the homepage. It works great! But I need the scroll over to be transparent. I want the first section stuck in place (which it is) and the rest of the sections that scroll over it, need to be transparent so that I can see that first section in the background. How do I achieve this? This is the current css I have in place: 

section[data-section-id="65ca978295d71019eda39c64"] > * {
background-color: transparent;
color:transparent !important; }

#page .page-section {position: sticky!important; top: 0px}
html {scroll-behavior: smooth}

Link to comment
  • Replies 7
  • Views 919
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Website address?

👨‍🔧👨‍💻 Contact me for development work - I’m a Freelancer Software engineer, Architect, and Designer UI/UX

🙋‍♂️ Squarespace Custom Web Development & Design

📅 Manage Tasks, Take Notes, and Upload Related Images

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 200 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

 

Link to comment

You could do something like this

#sections > :first-child.page-section {
    z-index : 10;
}

 

Screenshot 2024-03-13 at 19.40.28.png

👨‍🔧👨‍💻 Contact me for development work - I’m a Freelancer Software engineer, Architect, and Designer UI/UX

🙋‍♂️ Squarespace Custom Web Development & Design

📅 Manage Tasks, Take Notes, and Upload Related Images

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 200 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

 

Link to comment

You can play with the z-index CSS Property on the first section and on the other ones

#sections > :first-child.page-section {
    z-index : 2;
}

#sections > :nth-child(NUMBER OF SECTION).page-section {
    z-index : VALUE HERE;
}

 

Screenshot 2024-03-13 at 19.48.49.png

👨‍🔧👨‍💻 Contact me for development work - I’m a Freelancer Software engineer, Architect, and Designer UI/UX

🙋‍♂️ Squarespace Custom Web Development & Design

📅 Manage Tasks, Take Notes, and Upload Related Images

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 200 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

 

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.