Jump to content

Overlays on Gallery Blocks or Gallery Sections 7.1

Recommended Posts

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. 

Link to comment
  • Replies 10
  • Views 449
  • Created
  • Last Reply

Top Posters In This Topic

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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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!

 

 

 

 

 

 

Link to comment
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?

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!)

Link to comment
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?

image.thumb.png.e9a3ab22ae1e5cd73b09f52fcb5e3634.png

#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?

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!)

Link to comment

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)

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

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

Thank you!

Screen Shot 2022-08-31 at 10.19.02 AM.png

Use this code

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

 

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!)

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.