Adding color overlay on GALLERY SLIDESHOW on Squarespace 7.1

Site URL: https://perch-onion-hpxy.squarespace.com/new-page-2

Hi there,

I want to add overlay color on Slideshow Gallery on Squarespace 7.1.

Also, there is a moving background gradient I added on the footer. Can I add moving gradient overlay on Gallery?

If not, then simple color overlay will work.

I can't find the accurate code for this.

Any help would be appreciated!

Thank You.

Najiyya Y.

Overlay on hover or?

Hi, I have the same issue. I would like to add an overlay on a slideshow gallery. The same way it works with a full bleed image.

5 hours ago, egoutal said:

Hi, I have the same issue. I would like to add an overlay on a slideshow gallery. The same way it works with a full bleed image.

Can you share link to page where you use Slideshow and disable autoplay? We can check easier

Hi, thanks! Its a private website for the moment! How can I share this?

Hi tuanphan,

I want to add gradient overlay color, just like Squarespace has an option to add Background Overlay Opacity to Images on 7.1 sections

If the color that you want as an overlay is the background color of that section, just change the opacity of the slideshow by posting the following into Custom CSS, and the background color will show through:

.gallery-fullscreen-slideshow-wrapper {opacity:0.6;}

Easily change the background color by choosing it in the Colors settings for that section. This is for a full-bleed slideshow only, but I assume that's what you're using if you want an overlay.

How can you do this with a banner slideshow? @Inscape

On 12/8/2021 at 1:19 AM, BeeLeaf said:

How can you do this with a banner slideshow? @Inscape

If you share link to page where you added banner slideshow, we can help easier

Hi @tuanphan @Inscape I am interested in using a moving background with a gradient. I found a nice color combo on Lottie, but every time I tried adding it to a page, it wasn't formatted correctly. I edited the size and played around with height and width but it didn't look good. 

I would like to add to the background of my contact page. I still want my contact form to have the same formatting per Squarespace site styles.

Here's the color combo and movement from Lottie for your reference https://app.lottiefiles.com/animation/27afcaf4-6505-4404-ad4e-7d1b86f2288e?panel=embed

Any recommendations would be helpful.

Many Thanks!

Tina

On 3/2/2024 at 5:01 AM, TinaCreates said:

Hi @tuanphan @Inscape I am interested in using a moving background with a gradient. I found a nice color combo on Lottie, but every time I tried adding it to a page, it wasn't formatted correctly. I edited the size and played around with height and width but it didn't look good. 

I would like to add to the background of my contact page. I still want my contact form to have the same formatting per Squarespace site styles.

Here's the color combo and movement from Lottie for your reference https://app.lottiefiles.com/animation/27afcaf4-6505-4404-ad4e-7d1b86f2288e?panel=embed

 

Any recommendations would be helpful.

Many Thanks!

Tina

If you share link to page, I can test code easier

Hi @tuanphan, Thanks for your reply. I ended up going in a different direction. 

Thanks Again

Tina