Jump to content

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

Recommended Posts

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!

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

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

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

 

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

 

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

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

Edited by rditty
solved a problem
Link to comment
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;
}

 

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
  • 7 months later...

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.