Is there a way to put a text overlay on the images on a gallery page when you hover over them?

Site URL: https://www.robertditty.com/

This might not be possible (or too complicated) but I would like there to be a text overlay when hovering on my images on my homepage. The Supply template does this ( https://supply-demo.squarespace.com/shop-supply?category=Apparel ) but I prefer Wells' wider sidebar.

As an alternative, if there was a way for the caption to appear on hover in thumbnail mode that would be better than nothing. 

Or if there is an alternative to the gallery pages that allows this, let me know. Thanks!

It looks like this template doesn't support text, so no way to achieve hover effect.

You can try adding Gallery Block, then we can test the code

Hi tuanphan, thanks for looking into this.

Do you mean like a new page with a gallery block?

I made this one to test:

https://www.robertditty.com/gallery-test

20 hours ago, rditty said:

 

Hi tuanphan, thanks for looking into this.

Do you mean like a new page with a gallery block?

I made this one to test:

https://www.robertditty.com/gallery-test

 

Try adding to Design > Custom CSS

/* Darken on hover */
.slide a:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
	pointer-events: none;
}
.slide a {
    position: relative;
}
.slide a {
    position: relative;
    opacity: 1 !important;
}
.slide:hover a:after {
	opacity: 1;
}
.image-slide-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    opacity: 0;
    z-index: 1000;
    transition: all 0.5s;
	pointer-events: none;
}
.slide:hover .image-slide-title {
    opacity: 1;
}

That worked beautifully! Thank you very much for taking the time to write that. 

Would there be a way to change the font of those gallery titles? Like increase the size and weight? So it's larger and bolder. Thank you for all your help!

2 hours ago, rditty said:

Would there be a way to change the font of those gallery titles? Like increase the size and weight? So it's larger and bolder. Thank you for all your help!

Edit this code

.image-slide-title {
	font-size: 30px !important;
	font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    opacity: 0;
    z-index: 1000;
    transition: all 0.5s;
	pointer-events: none;
}

Thanks again! But for some reason, the text gets cut off when it is enlarged. You can see what I mean: https://www.robertditty.com/

Also, the darken on hover doesn't work on my video gallery:

https://www.robertditty.com/videography

Any ideas why that would be?

I just added line-height property and that fixed the text being cut off and added some more code to create a line break instead of the ellipses. So that part is done.

However, I'm still wondering about my other problem with the dark overlay not appearing on my video galleries. Do you know how to correct the issue

On 6/24/2022 at 3:04 PM, rditty said:

I just added line-height property and that fixed the text being cut off and added some more code to create a line break instead of the ellipses. So that part is done.

 

However, I'm still wondering about my other problem with the dark overlay not appearing on my video galleries. Do you know how to correct the issue

Change this code

.slide a:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
	pointer-events: none;
}

To this

.slide a:after, .slide .video-fill:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
	pointer-events: none;
}

and change this code

.slide:hover a:after {
	opacity: 1;
}

to this

.slide:hover .video-fill:after {
	opacity: 1;
}

This is really helpful - Is there a way to make the background go lighter instead of darkened? I tried replacing it with "lighten" but doesn't work. Thank you!!

Any chance you can share the CSS code you used for "added some more code to create a line break instead of the ellipses."

On 2/4/2023 at 2:36 AM, JKDwebsite said:

This is really helpful - Is there a way to make the background go lighter instead of darkened? I tried replacing it with "lighten" but doesn't work. Thank you!!

Change this line

background: rgba(0,0,0,0.5);

On 2/4/2023 at 3:12 AM, JKDwebsite said:

Any chance you can share the CSS code you used for "added some more code to create a line break instead of the ellipses."

 

What should it look like?

This is great. Is there a way to also display the caption/title without having to hover?

Disregard - figured it out. Thank you