Jump to content

Reveal text/title over image on hover (Squarespace Mara Brag 7.0)

Go to solution Solved by Lesum,

Recommended Posts

Hi Squarespace community,

My portfolio contains a bunch of images that has the title of each project permanently displayed over each image (in the top left corner of each image). These images are laid out in 'gallery' blocks and open a Vimeo video popup once clicked on. 

I'm using the Mara Brag template in Squarespace 7.0.

Here's a link to my website: https://www.chrisward.com.au/

 

I'd like to have the text/title reveal in the center of each image when the cursor hovers over the image, much the same as this website: https://novembafilms.com/

Is it possible to add CSS code to make this work? 

Any help would be greatly appreciated!

Cheers, Chris

Link to comment
  • Solution

@chris_editor Hi! Try adding this code snippet under Website > Pages > Website Tools > Custom CSS.

.Index-gallery-item-content.Index-gallery-item-content--has-title-and-body {
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    position: absolute !important;
    top: 0% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    visibility: hidden;
}

.Index-gallery-item:hover .Index-gallery-item-content.Index-gallery-item-content--has-title-and-body {
    visibility: visible;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.