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. 

On 10/12/2023 at 8:41 AM, Ziggy said:

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

Hi, I am having the exact same issue with the opacity of captions. How did you manage to fix it in the end so only the image fades out? Thanks!

On 9/5/2024 at 8:35 PM, KLAstudio said:

 

Hi, I am having the exact same issue with the opacity of captions. How did you manage to fix it in the end so only the image fades out? Thanks!

If you share link to page where you have problem, we can check easier

Hi - here is the link

https://oriole-tarantula-lttf.squarespace.com/
PW: KLA378?

On 10/12/2023 at 8:41 AM, Ziggy said:

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

Hi, I am having the exact same issue with the opacity of captions. How did you manage to fix it in the end so only the image fades out? 

@Ziggy @tuanphan Could anyone help with this issue please?  Thank you