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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

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

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

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

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.