Jump to content

7.1 Banner Slideshow Color Overlay?

Recommended Posts

On 9/16/2021 at 12:24 PM, justinbryeans said:

Site URL: https://rabbit-primrose-wsww.squarespace.com/

I've looked at the built in style options and don't see the ability to set color overlay opacity for slides within the Banner Slideshow.

Is that correct? 

And if that isn't a built in option, any thoughts on adding such via CSS?

Thanks!

 

Screen Shot 2021-09-15 at 10.05.53 PM.png

Hi,

What is access password?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
On 1/5/2022 at 8:58 PM, kated1987 said:

Hi,

Did anyone have a solution for this? Really looking to do the same and add an overlay on images used within the banner slideshow. Any help would be really appreciated!

Many thanks.

KD

Add to Design > Custom CSS

/* Banner slideshow overlay */
.user-items-list-banner-slideshow .slide-content {
    background-color: rgba(0,0,0,0.25);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 1/7/2022 at 2:21 AM, tuanphan said:

Add to Design > Custom CSS

/* Banner slideshow overlay */
.user-items-list-banner-slideshow .slide-content {
    background-color: rgba(0,0,0,0.25);
}

 

This is great! Is there any way to have the overlay cover the whole image, and not have it only behind the text content?

Edited by PatrickJ
Link to comment
On 2/26/2022 at 9:32 AM, PatrickJ said:

This is great! Is there any way to have the overlay cover the whole image, and not have it only behind the text content?

Can you share link to page where you use slideshow? We can check it again easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 weeks later...
On 3/23/2022 at 4:01 PM, PatrickJ said:

Not sure why I miss this comment. You mean cover Our Process section image?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/7/2022 at 7:29 PM, PaullyDca said:

What did ya do? I've been trying to figure this out to get the overlay over the full image for a few days now. 

If you share link to share link to page where you use slieshow? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/15/2022 at 3:34 AM, isometricstudio said:

Same question here. How do we put the black opacity overlay across the entire slideshow image area and not just the text div? Here is our link:

https://turquoise-grasshopper-fa8h.squarespace.com 

Add to Design > Custom CSS

/* Slideshow Overlay */
.slide-media-container:after {
    content: "";
    background-color: rgba(0,0,0,0.95);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9099;
}
.slide-content.list-item-card-background {
    z-index: 99999999999999;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/18/2022 at 9:13 AM, tuanphan said:

Add to Design > Custom CSS

/* Slideshow Overlay */
.slide-media-container:after {
    content: "";
    background-color: rgba(0,0,0,0.95);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9099;
}
.slide-content.list-item-card-background {
    z-index: 99999999999999;
}

 

PERFECT!!! Thank you that solves it for me :) 

Link to comment
  • 2 months later...
On 6/23/2022 at 9:46 PM, ChristineB said:

This was super helpful! Is there a way of keeping the text 'still' on the site when scrolling to the next slide? 

What is your site url? We will check it again

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 6/28/2022 at 1:02 PM, ChristineB said:

it is: octahedron-pomegranate-t3wz.squarespace.com
PW: EQc0py1234

 

Thanks, Tuanphan!

EQc0py1234

incorrect password

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
  • 1 year later...
On 11/20/2023 at 8:29 PM, arnaudchabot said:

Hello how can i add a background overlay opacity above my homepage slideshow ?

https://www.arnaudchabot.com/

 

Just add this code to Website > Website Tools (under Not Linked) > Custom CSS

body.homepage figure.gallery-fullscreen-slideshow-item:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.