7.1 Caption on Hover - Gallery Simple

Site URL: https://sturgeon-bamboo-52ac.squarespace.com/portfolio

https://sturgeon-bamboo-52ac.squarespace.com/portfolio

I would like to have a caption show when someone hovers over an image, with an overlay as well. Is this possible?

1 hour ago, designbyamber said:

Site URL: https://sturgeon-bamboo-52ac.squarespace.com/portfolio

https://sturgeon-bamboo-52ac.squarespace.com/portfolio

I would like to have a caption show when someone hovers over an image, with an overlay as well. Is this possible?

You can try

.gallery-grid-item {
  position: relative;
}

.gallery-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-grid-item-wrapper:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}

.gallery-grid-item:hover .gallery-grid-item-wrapper:after {
  background: rgba(255, 255, 255, 0.3);
}

.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

@bangank36  How do I make the overlay text white and bold? Thank you!

https://sturgeon-bamboo-52ac.squarespace.com/portfolio

@bangank36 I noticed the css made it so the image links do not work - do you know how  to fix? Also want to make overlay text white.

At the my moment, it works on my testing, have you added my codes?

About the text, have you turned on the caption of gallery? I can not find it now