Image Description on Hover: Grid: Masonry 7.1

On 11/28/2022 at 9:30 PM, superamerickson said:

Might be a dumb question (as I'm so new to this)...but, I put in your code and it worked brilliantly...but once I assigned a link to my image, the image no longer darkens on rollover. How do I get it to both darken and link?

This code affects on Linked Image only. If you share link to a page where you added link for some images, we can check code for linked image - no link easier.

On 6/19/2020 at 5:35 PM, jpeter said:

@Falconer You can try adding the CSS below to the page

.gallery-caption-grid-masonry {
  opacity: 0;
  z-index: -1;
  transition: all .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  text-align: center;
  color: #fff;
  height: 100%;
  padding: 0;
}


.gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before {
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  opacity: 0;
  transition: all .5s;
}

.gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
  height: auto;
}

.gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
}


.gallery-masonry-item:hover .gallery-caption-grid-masonry:before {
  opacity: 1;
  transition: all .5s;
}

.gallery-caption-grid-masonry .gallery-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-caption-grid-masonry p.gallery-caption-content {
  z-index: 1000;
  font-size: 1.3rem;
}

This will add the following effect:

 

Many thanks for this CSS, almost exactly what I was looking for.

Is it possible to tweak so that Lightbox functionality can be preserved? Seems to be over-ridden currently.

Appreciate the help! 

On 6/9/2023 at 7:39 AM, Rowley said:

Many thanks for this CSS, almost exactly what I was looking for.

Is it possible to tweak so that Lightbox functionality can be preserved? Seems to be over-ridden currently.

 

Appreciate the help! 

Can you share link? We can check easier

I have the same problem. The CSS works perfectly, title on image on hover. 👌😊

But it disables the Lightbox function (Masonry grid) Any suggestions to what I can do?

Thank you!

On 9/21/2023 at 5:37 PM, Norwegian said:

I have the same problem. The CSS works perfectly, title on image on hover. 👌😊

But it disables the Lightbox function (Masonry grid) Any suggestions to what I can do?

Thank you!

 

What is page url? We can give extra code to enable lightbox

I am having the same issue with this code disabling the lightbox. Is there an extra code that can be used to enable the lightbox while still having the hover effect?

On 12/16/2023 at 3:22 AM, AcadiaBromke said:

I am having the same issue with this code disabling the lightbox. Is there an extra code that can be used to enable the lightbox while still having the hover effect?

 

Yes. I think this should be able to, can you share link to this page?