justinbryeans Posted September 16, 2021 Posted September 16, 2021 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!
tuanphan Posted September 19, 2021 Posted September 19, 2021 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! 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
kated1987 Posted January 5, 2022 Posted January 5, 2022 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
tuanphan Posted January 7, 2022 Posted January 7, 2022 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); } PatrickJ 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
PatrickJ Posted February 26, 2022 Posted February 26, 2022 (edited) 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 February 26, 2022 by PatrickJ
tuanphan Posted February 27, 2022 Posted February 27, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
PatrickJ Posted March 23, 2022 Posted March 23, 2022 On 2/27/2022 at 12:43 AM, tuanphan said: Can you share link to page where you use slideshow? We can check it again easier For sure! https://www.bronsondesign.ca/about
tuanphan Posted March 26, 2022 Posted March 26, 2022 On 3/23/2022 at 4:01 PM, PatrickJ said: For sure! https://www.bronsondesign.ca/about 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
PatrickJ Posted March 30, 2022 Posted March 30, 2022 On 3/25/2022 at 8:40 PM, tuanphan said: Not sure why I miss this comment. You mean cover Our Process section image? No worries! Actually figured it out, thanks! tuanphan 1
PaullyDca Posted April 7, 2022 Posted April 7, 2022 On 3/30/2022 at 8:26 PM, PatrickJ said: No worries! Actually figured it out, thanks! 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.
tuanphan Posted April 10, 2022 Posted April 10, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
isometricstudio Posted April 14, 2022 Posted April 14, 2022 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 Skylab 1
tuanphan Posted April 18, 2022 Posted April 18, 2022 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; } albumlogy 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
PaullyDca Posted April 19, 2022 Posted April 19, 2022 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 :)
ChristineB Posted June 23, 2022 Posted June 23, 2022 This was super helpful! Is there a way of keeping the text 'still' on the site when scrolling to the next slide?
tuanphan Posted June 24, 2022 Posted June 24, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
ChristineB Posted June 28, 2022 Posted June 28, 2022 On 6/24/2022 at 11:45 PM, tuanphan said: What is your site url? We will check it again it is: octahedron-pomegranate-t3wz.squarespace.com PW: EQc0py1234 Thanks, Tuanphan!
tuanphan Posted June 30, 2022 Posted June 30, 2022 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Skylab Posted October 23, 2022 Posted October 23, 2022 On 4/14/2022 at 4:34 PM, 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 This is a real nice site
arnaudchabot Posted November 20, 2023 Posted November 20, 2023 Hello how can i add a background overlay opacity above my homepage slideshow ? https://www.arnaudchabot.com/
tuanphan Posted November 22, 2023 Posted November 22, 2023 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
jennifer-solmadestudio Posted October 3 Posted October 3 (edited) Can someone please help me with this code for my website? https://mandeejohnson.com/slider-tester I'd like the top slideshow ( section[data-section-id="66fea5eb5ed57f76dd8ea5c3"] to have a semitransparent black overlay covering the entire banner using CSS remove the padding that's creating a white band below the slideshow on mobile, have the slideshow get cropped to fill the section (see attached) Edited October 3 by jennifer-solmadestudio
jennifer-solmadestudio Posted October 7 Posted October 7 (edited) @thesquareteam thank you, we're getting closer! Can you help me with a few tweaks? I added z-index: 1; to get the overlay to sit on top of the slideshow images, 1) so that now looks the way I want it to on DESKTOP but for some reason it's displaying behind the slideshow on mobile?? and 2) the overlay still isn't lining up with the bottom of the slideshow in mobile. I tried applying padding: 0; but nothing changed. Can you please take another look and advise exactly how this code should be written? And 3) I tried applying the object-fit: cover; code but I must not be doing it right. In the attached image, the top section is the one we're working on (it's an autoplay slideshow). The second section shown here has one image as the section background, but I like how I can scale it up and crop it on mobile. Can you write exactly how that code should be written in my css to have the slideshow be mobile responsive in a similar way? Edited October 7 by jennifer-solmadestudio
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment