Hover text in grid

Hi Squarespace

I have a small problem. 

I'm trying to add a small text, that appears when hovering over the images, on my PROJECTS page. Just a small P2 text that says 'DISCOVER THIS PROJECT'. 

https://hexahedron-tuba-35nb.squarespace.com

PW: ANNA

Can you help? Thank you vey much in advance! 

Alastair

Same text for all items or different?

https://hexahedron-tuba-35nb.squarespace.com/projects

Thanks. 

Yes, same text for all. Something like: "Discover the project here". 

In the center of the image.

You can use this code to Website Tools > Custom CSS

div.grid-image-inner-wrapper:before {
    content: "Discover projects";
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999999999999999 !important;
    opacity: 0;
}
.grid-item:hover div.grid-image-inner-wrapper:before {
    opacity: 1;
}

Thanks! It works! 

Though it kind of hides behind the grey hover colour. It there a way to bring it to the front, so it is easier to read?

On 5/22/2024 at 3:36 PM, halfhide said:

Thanks! It works! 

Though it kind of hides behind the grey hover colour. It there a way to bring it to the front, so it is easier to read?

Because you used code to change opacity of whole image, so it will affect both image + text. You can use this CSS under to unset it.

a.grid-item, .grid-image {
    opacity: 1 !important;
}
.grid-item:hover .grid-image-inner-wrapper:after {
    background: rgba(158,158,158,0.5) !important;
    opacity: 1 !important;
}

you can change rgba color to what you want

Amazing! Thank you so much for your help! Always great service!