Jump to content

Adding a text overlay on gallery slideshow (full bleed autoplay on homepage)

Go to solution Solved by tuanphan,

Recommended Posts

Hey!

I want to add a text overlay (different pieces of text for each image) to a full bleed gallery slideshow (autoplay with no arrows) — I've been searching this forum all day but haven't found a definitive answer yet.

I tried the slideshow with the text and the arrows and added a code injection on the header to autoplay the gallery. However, the client did not like that the image "slid" to the next once VS. how it is now (cutting to the next image without any sliding).

I'm hoping there's a simple solution to this, as it seems many people have been asking for this for years! 

 

Thanks a bunch 🙂

For reference, here is the URL: 
https://anabezi.squarespace.com/
Password: ana123

1983215410_ScreenShot2022-12-19at7_21_30PM.thumb.png.c01055ef002dd07e9beb7970cb579bef.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Enable Options: Captions

then edit each image

text will appear under slideshow

share link to page where you use slideshow, we can give code to move it over image

Or You can consider using List Section Banner Slideshow. It has all options

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
  • Solution
On 12/20/2022 at 11:58 PM, taylahroberts1 said:

Hi @tuanphan

I've added the captions now, is there a way to make them larger, move them up and to the left of the page and then remove the black bar at the bottom? Thank you!

It's for the gallery at the opening (with the overlay of the navigation and logo).

Here is the URL: https://anabezi.squarespace.com/home 
password: ana123

1512362938_ScreenShot2022-12-20at8_44_36AM.thumb.png.404aeb04ae55c37b92328d60a25b6124.png

Add to Design > Custom CSS

body#collection-639bcaa9e249ef08743e64b2 {
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    top: 50%;
    left: 0;
    text-align: left;
    max-width: 90%;
}
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * {
    font-size: 30px;
}
.gallery-fullscreen-slideshow {
    margin-bottom: 0px !important;
}}

 

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 12/22/2022 at 11:23 PM, taylahroberts1 said:

Thank you so much @tuanphan! This worked perfectly. 

What CSS would need to be added to change the text size for mobile only? 

Adjust code to this

body#collection-639bcaa9e249ef08743e64b2 {
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    top: 50%;
    left: 0;
    text-align: left;
    max-width: 90%;
}
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * {
    font-size: 30px;
}
.gallery-fullscreen-slideshow {
    margin-bottom: 0px !important;
}
/* mobile size */
@media screen and (max-width:767px) {
figcaption.gallery-caption.gallery-caption-fullscreen-slideshow * {
    font-size: 20px;
}}}

 

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.