danielhaydenh

@tuanphan - Can you help with alignment issues on mobile pease.

I'm using the code posted above.

Thanks in Advance

@tuanphan i'm having a similar issue if you can shed some light i would be very grateful

I have edited the code to add a background colour to images with links attached to them but i do want it to behave like the 3 and 4 test images

www.dhaydendesign.com/portfolio-test

On 6/19/2020 at 9:35 AM, 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:

 

@jpeter ive used this code and it works great but when the image has a link attached to it it removed the colour overlay. do you know of how to adjust this?