Adding a clickable caption overlay to Gallery

Site URL: https://www.offpaper.design/portfolio-redo

Hello!

I'm re-doing a portfolio and need to make the Masonry Gallery grid with opacity overlays with clickable captions.

(have made the page temporarily live incase anyone needs to look at the coding)

I've found lots of threads on here that has gotten me to a certain stage, but as soon as I add in a link, the overlay disppears?

If anyone can help, that would be great, thank you!

On 8/26/2021 at 9:09 PM, cl-lh-2021 said:

Site URL: https://www.offpaper.design/portfolio-redo

Hello!

I'm re-doing a portfolio and need to make the Masonry Gallery grid with opacity overlays with clickable captions.

(have made the page temporarily live incase anyone needs to look at the coding)

I've found lots of threads on here that has gotten me to a certain stage, but as soon as I add in a link, the overlay disppears?

If anyone can help, that would be great, thank you!

Hi,

Can you add the code? We can check easier

Or you can post code here, we can test it easier

On 8/30/2021 at 2:38 AM, tuanphan said:

Hi,

Can you add the code? We can check easier

Or you can post code here, we can test it easier

Yes of course - all below

//CAPTION OVERLAY HOVER - GALLERY//
.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;
}

11 hours ago, cl-lh-2021 said:

Yes of course - all below

 

//CAPTION OVERLAY HOVER - GALLERY//
.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;
}

Can you add link for first image? We will test the new code

7 hours ago, tuanphan said:

Can you add link for first image? We will test the new code

Yes of course - all added onto Image 1. 

It links to a new page I've created just for this purpose - this will show the overlay disappearing.

13 hours ago, cl-lh-2021 said:

Yes of course - all added onto Image 1. 

It links to a new page I've created just for this purpose - this will show the overlay disappearing.

Change this code

.gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before {
    background-color: rgba(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
}

to this

.gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before, .gallery-masonry-item a:before {
    background-color: rgba(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
}

change this code

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

to this code

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

and change this

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

to this

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

@tuanphan thank you so much! apologies for the late reply, I've been away.
this has fixed it perfectly 🙂 

On 9/1/2021 at 3:42 PM, tuanphan said:

Change this code

.gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before {
    background-color: rgba(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
}

to this

.gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before, .gallery-masonry-item a:before {
    background-color: rgba(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
}

change this code

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

to this code

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

and change this

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

to this

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

I believe I've copied all the code above correctly, but my masonry grid images are still not clickable. Any idea why?

addisonpann.art/portfolio/graphicdesign

Password: toast

CSS: 

.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%;
  max-width: 100vw;
  padding: 0;
}
.gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before, .gallery-masonry-item a:before {
    background-color: rgba(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: 999999;
    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, .gallery-masonry-item:hover a:before {
    opacity: 1;
    transition: all .5s
}
.gallery-caption-grid-masonry .gallery-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
}
.gallery-caption-grid-masonry p.gallery-caption-content {
  z-index: 1000;
  font-size: 2em;
  font-weight: 400;
  margin: 2vh 2vw;
}
.gallery-caption-grid-masonry p.gallery-caption-content {
  z-index: 1000;
}

Also, in .gallery-caption-grid-masonry I added max-height: 100vw because the overlay wasn't filling the width of the container. Is there a better way to ensure the overlay fills the container's width?

17 hours ago, addisonpann said:

I believe I've copied all the code above correctly, but my masonry grid images are still not clickable. Any idea why?

For anybody stumbling across this later on, I managed to make it work. The overlay displays while the images underneath are clickable.

Here's the code I used:

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

(That's the only thing I changed since my previous post asking for guidance)