Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Pandagal

Gallery Captions HOVER Squarespace 7.1 Please help!

Question

Site URL: https://terrier-pelican-7hsm.squarespace.com

Hey, would love some help please!

I'm pretty new to Squarespace, and am trying to get my captions to hover over my images in a masonry gallery. I've been researching, and seems Squarespace 7.1 has only just allowed captions with galleries? I've used the below code, and the captions do appear. However, I really want the captions to be as a hover option over the image. Does anyone know how to do this?

I've attached a screen shot of how the captions are currently showing on images.

Been driving me crazy and would love some advice! Thank you! 

x

 

figcaption.gallery-caption.gallery-caption-grid-masonry  {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    color: white;
    left: 0;
    text-align: center;
  img:hover
}

Screenshot 2020-06-19 at 12.47.24.png

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0

@Pandagal Is this the effect you're after? If so this could should get you started

 

/* Add this code to Design -> Custom CSS */

.gallery-caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    text-align:center;
    opacity: 0;
    transition: all .3s ease;
    background-color: white;
    height: 100%;
}

.gallery-masonry-item:hover .gallery-caption {
    opacity: 1;
    transition: all .3s ease;
}

.gallery-caption-wrapper {
    display: flex;
    place-items: center;
    justify-content: center;
}

 


Philadelphia, PA

Available for hire

Beyond Copy/Paste: Learn CSS for Squarespace Workshop

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0

This is brilliant! Thank you so much. Is it possible to make the white in the picture opaque? Slightly see through? If that makes sense! Thanks again. 

Share this post


Link to post
  • 0
On 6/19/2020 at 9:46 AM, Pandagal said:

This is brilliant! Thank you so much. Is it possible to make the white in the picture opaque? Slightly see through? If that makes sense! Thanks again. 

Did you ever find an answer for this? I'm having the same problem. 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...