Jump to content

Squarespace 7.1 - Slideshow Image Overlay Color

Go to solution Solved by jpeter,

Recommended Posts

  • Solution


The following CSS will target the 2nd slide by using the :nth-child() pseudo class. It the :after pseudo element  to add a layer on top of the image and uses the rgba() css function to add background color of black with an opacity of .4 


[data-section-id="6351e1b422792e0685dc2531"] .slides .slide:nth-child(2) .slide-media-container:after {
  background: rgba(0,0,0, .4); 
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;


Here's a recording changing the opacity value of the background color:



Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

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.