Overlays on Gallery Blocks or Gallery Sections 7.1

I've tried adding all types of gallery sections or blocks I can find in 7.1 

All I need is slideshow hero gallery (with 7.0 style poster layout - H2 Text, H4 Text and a Button) on each slide.  The problem is I need an image overlay so that the text doesn't disapear into the background image.  I can't find this in styles, or any of the edit content or section options.  I've tried css but failed there too.  Lastly I tried adding both clear and 10% black png files to the section, but even then the overlay opacity for the color theme which is set to #000 did nothing.

All I need is a black transparency so you can see the text over the image. 

1 hour ago, kmdesign said:

I've tried adding all types of gallery sections or blocks I can find in 7.1 

All I need is slideshow hero gallery (with 7.0 style poster layout - H2 Text, H4 Text and a Button) on each slide.  The problem is I need an image overlay so that the text doesn't disapear into the background image.  I can't find this in styles, or any of the edit content or section options.  I've tried css but failed there too.  Lastly I tried adding both clear and 10% black png files to the section, but even then the overlay opacity for the color theme which is set to #000 did nothing.

All I need is a black transparency so you can see the text over the image. 

Can you share your site with protected password so we can take a look?

Hi @bangank36 

Here's the site:  https://wolverine-chimes-ay54.squarespace.com/. 

Password: MANIFESTO

I'm trying to create a hero gallery slideshow (you'll see the ones I've added to the homepage) - I'm having a number of issues. I've tried gallery blocks and gallery sections and am coming to see that my built-in editing options are really limited. 

1) I need to be able to have (and adjust an overlay) so my text doesn't get lost on my image

2) I would like to be able to change the body font to my H4 font 

3) I would like the slideshow to be full width on mobile (I found some code you posted here in the forums and tried it... it adjusted the image size to full width, but created a large black box below it with the navigation arrows at the bottom) so not desirable.   

I may have to go find a plugin for this.  Any help suggestions would be appreciated. Thank you!

On 8/26/2022 at 3:47 AM, kmdesign said:

Hi @bangank36 

Here's the site:  https://wolverine-chimes-ay54.squarespace.com/. 

Password: MANIFESTO

I'm trying to create a hero gallery slideshow (you'll see the ones I've added to the homepage) - I'm having a number of issues. I've tried gallery blocks and gallery sections and am coming to see that my built-in editing options are really limited. 

1) I need to be able to have (and adjust an overlay) so my text doesn't get lost on my image

2) I would like to be able to change the body font to my H4 font 

3) I would like the slideshow to be full width on mobile (I found some code you posted here in the forums and tried it... it adjusted the image size to full width, but created a large black box below it with the navigation arrows at the bottom) so not desirable.   

I may have to go find a plugin for this.  Any help suggestions would be appreciated. Thank you!

 

 

 

 

 

 

#1. TO add overlay over List Section Image, add this to Design > Custom CSS

.user-items-list-item-container[data-section-id="6303e1fce32cf2129dfb3550"] .slide-media-container:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
.slide-content.list-item-card-background {
    z-index: 99999;
}

#2. You mean 

Description goes here text?

#3. You mean make image show fullsize?

@tuanphan Thank you!  Okay that worked great.

Are you able to help with #2 and #3? 

#2 - change the body text from "p" to "h4"

#3 - adjust images to full-width on mobile (they are currently getting cut off

#4 - (this is a bonus request) can autoplay be enabled on this section?

Thank you!! 🙏🏻

On 8/29/2022 at 8:31 PM, kmdesign said:

@tuanphan Thank you!  Okay that worked great.

Are you able to help with #2 and #3? 

#2 - change the body text from "p" to "h4"

#3 - adjust images to full-width on mobile (they are currently getting cut off

#4 - (this is a bonus request) can autoplay be enabled on this section?

#2. You mean this text?

#3. Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
/* List section height */
.user-items-list-item-container[data-section-id="6303df833212c5264c916d19"] ul {
    min-height: unset !important;
}
}

#4. Do this Slideshow or all slideshow on site?

Thanks so much @tuanphan You're awesome css for #3 worked great to fix the mobile height and width.  Yes for #2 I would like to change the text "Description Goes Here" from my "p" font to my "H4" font. 

Is there anyway to set this to autoplay?

Here is the we're working on section[data-section-id="6303e1fce32cf2129dfb3550"] (I deleted the other ones)

#2 - change description goes here from "p" to "h4"

Thank you!

On 8/31/2022 at 9:21 PM, kmdesign said:

#2 - change description goes here from "p" to "h4"

Thank you!

Use this code

/* list slideshow body text */
div.slideshow-wrapper .list-item-content__description {
    font-size: 30px !important;
    font-weight: bold;
}

Thank you so much @tuanphan