Jump to content

Adding a clickable caption overlay to Gallery

Recommended Posts

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!

Link to comment
  • Replies 8
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

image.thumb.png.26fd5653e2e62f233a787c96a6a74e1d.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
  • 2 months later...
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;
}

image.thumb.png.26fd5653e2e62f233a787c96a6a74e1d.png

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?

Link to comment
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)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.