Captions on Hover - Gallery Masonry Layout

Hello, 

I'm trying to display captions on hover (on hover only) for a gallery wihth a Masonry layout. 

https://formedgardens.squarespace.com/projects
password: fg

I'm using the following code: 
 

section[data-section-id="6526275e7a97df2f9d881199"]
.gallery-caption-grid-masonry h4 {
  margin-bottom: 0;
  text-align: center;
}

//Overlay Style //
section[data-section-id="6526275e7a97df2f9d881199"] .gallery-caption-grid-masonry {
  max-width: 100%;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  bottom: 30%;
  width: 100%;
}

//Hover Mode //
section[data-section-id="6526275e7a97df2f9d881199"]
.gallery-masonry-item:hover {
opacity: 0.5;
}

It's getting the caption where I want it, however, i DON'T want the caption to display unless you hover over the image thumbnail. 

Does anyone know what CSS I can use to achieve this?

So the normal thumbnail state should just show the image, and then when you hover, you should be able to see the caption and the image should be faded out. Like the attached screenshot. 

Thank you 🙂 

Change the CSS to this, I've added an opacity of zero and a hover to change the opacity, hopefully that works.

section[data-section-id="6526275e7a97df2f9d881199"]
.gallery-caption-grid-masonry h4 {
  margin-bottom: 0;
  text-align: center;
  transition:ease-in-out 300ms;
}

//Overlay Style //
section[data-section-id="6526275e7a97df2f9d881199"] .gallery-caption-grid-masonry {
  max-width: 100%;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  bottom: 30%;
  width: 100%;
  opacity:0;
  transition:ease-in-out 300ms;
}

//Hover Mode //
section[data-section-id="6526275e7a97df2f9d881199"]
.gallery-masonry-item:hover {
  opacity: 0.5;
  .gallery-caption-grid-masonry {
    opacity:1;
  }
}

Hi @Ziggy, 

Thank you! That seems to do the trick, however the caption text also seems to have an opacity applied when you hover. Is there a way to only have the image with a 0.5 opacity, and the text no opacity at all?

Appreciate it! 🙂

I can't actually see where the text opacity is coming from, it looks wrong but I can't see why in the code.