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

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

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

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

Thank you so much @tuanphan! This worked perfectly. 

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

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

@tuanphan

I am struggling with the same issue, I have changed the collection to my website but am unable to do so.

My website :- https://rhino-red-3bxa.squarespace.com/config/pages/646370f2154b595eb5fd4939

On 5/17/2023 at 1:48 AM, Jayant said:

@tuanphan

I am struggling with the same issue, I have changed the collection to my website but am unable to do so.

My website :- https://rhino-red-3bxa.squarespace.com/config/pages/646370f2154b595eb5fd4939

 

This is url for site owner.

You can click Exit > Click arrow on top right > Then real url will appear on browser address bar

I'm following this thread and trying to implement the same thing. Can you add a font change and color change as well as add an overlay to the font?

On 5/24/2023 at 4:52 AM, HeyKarenShea said:

I'm following this thread and trying to implement the same thing. Can you add a font change and color change as well as add an overlay to the font?

 

What is your site url?

https://lanternfish-maracas-phwl.squarespace.com/
Password: RKS123

sorry..the password is "rsk123"

I am hoping to have it with a background color over the images. Please see example on this site: 
https://www.scilights.com/

I actually got this figured out..but have another question. 

One I need to add a code to make the text convert to media view.

Also, is there now a way to get rid of the space between where the caption originally goes and the next section? There is a lot of white between the slideshow and text in the next section!
 

On 5/26/2023 at 1:57 AM, HeyKarenShea said:

https://lanternfish-maracas-phwl.squarespace.com/
Password: RKS123

Password is incorrect. Can you check it again?

Hello Tuanphan, 

What should I replace use to add an text like this:



over the slideshow:full?

Also, you will see that it does a animation when you mouse over to click.
also the image buttons below?

ref site: https://www.pickuplimes.com/

URL: https://formebar-sample.squarespace.com/
PW: HC

On 6/14/2023 at 10:32 AM, Mary_DG said:

Hello Tuanphan, 

What should I replace use to add an text like this:



over the slideshow:full?

Also, you will see that it does a animation when you mouse over to click.
also the image buttons below?

ref site: https://www.pickuplimes.com/

URL: https://formebar-sample.squarespace.com/
PW: HC

You mean text over top image? You can add a Text Block over image, then we can give code to add shadow same as reference site

Hi, this has been so useful - thank you! Wondering if you can help me with the next steps for my site too. 

https://olive-rhombus-8z34.squarespace.com/home-page password is ASHS

Can I change the colours or add a card behind so that the text doesn't get lost in the images? If I can't figure this out I might change to a list section as you suggested. Web building isn't something I've done before, but my organisation's current website is so ancient and terrible I've decided to give it a go (it's a work in progress!). 

19 hours ago, jjjcb said:

Hi, this has been so useful - thank you! Wondering if you can help me with the next steps for my site too. 

https://olive-rhombus-8z34.squarespace.com/home-page password is ASHS

 

Can I change the colours or add a card behind so that the text doesn't get lost in the images? If I can't figure this out I might change to a list section as you suggested. Web building isn't something I've done before, but my organisation's current website is so ancient and terrible I've decided to give it a go (it's a work in progress!). 

 

I see you figured it out, but you can add this code under your code to make it centered + add dark background behind text

figcaption.gallery-caption.gallery-caption-fullscreen-slideshow {
    margin-top: 0 !important;
    transform: translateY(-50%);
    top: 50% !important;
    height: auto !important;
}

figcaption.gallery-caption.gallery-caption-fullscreen-slideshow p {
    background-color: rgba(0,0,0,0.5) !important;
    display: inline-block;
}

The legendary Tuanphan! Been jumping all over different threads and seeing your posts, thank you so much for helping everyone!

Was wondering if you could help me out? This is my own site https://www.973partyrentals.com

Password: password

I want to have my gallery display a text and a button much how like this site does: 

https://www.tremontrentals.com/

(the animation it does isn't needed)

Are you able to help me out? The button would just lead to https://www.973partyrentals.com/contact

54 minutes ago, Slumpy said:

I want to have my gallery display a text and a button much how like this site does:

Try the following Intro Auto Layout section.

It looks like it's close to what you want.

Let us know how it goes.

1 hour ago, creedon said:

Try the following Intro Auto Layout section.

It looks like it's close to what you want.

Let us know how it goes.

I feel like it almost works, it doesn't seem to cycle through the images automatically from what I can tell?

28 minutes ago, Slumpy said:

it doesn't seem to cycle through the images automatically from what I can tell?

Please see the following.

Let us know how it goes.

10 hours ago, creedon said:

Please see the following.

Let us know how it goes.

This was perfect, thank you for your help!

On 12/22/2022 at 2:18 AM, tuanphan said:

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

This Custom CSS is not working for me. Ive enabled the captions on my full bleed "slideshow:full" and copied and pasted the above CSS but Nothing is changing.

On 10/1/2023 at 3:21 AM, Lashem said:

 

Maybe you need to change ID. Can you share link to page where you use slideshow?