Jump to content

Caption overlays working for one page, but not another.

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://addisonpann.art

password: toast

Using code provided by these forums, I have been able to initiate a caption overlay on masonry grid images upon hover. It works like a charm on my Graphic Design page, but the Hand Drawn page's captions appear dimmed, and I'm thinking they may be below the partially-transparent overlay.

Here's the CSS I'm using:

/* ------- GALLERY CAPTIONS --------*/
.gallery-caption-grid-masonry p.gallery-caption-content {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 2vw !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  line-height: 1.2em;
  color: #E19D9D;
  margin: 1.5em !important;
}


/*---- CAPTION HOVER OVERLAYS ------*/
.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,.5);
    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;
  pointer-events: none;
}
.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;
}

I'll admit I haven't used z-index much in the past, and I'd imagine the issue stems from that. Why do the captions display correctly on the Graphic Design page, but not on Hand Drawn?

Thanks in advance!

Link to comment
  • Replies 2
  • Views 320
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Solution

IN above code, you will see this code

/*---- CAPTION HOVER OVERLAYS ------*/
.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;
}

change z-index: -1; (line 4) to   z-index: 999999999999 !important;

/*---- CAPTION HOVER OVERLAYS ------*/
.gallery-caption-grid-masonry {
  opacity: 0;
  z-index: 999999999999 !important;
  transition: all .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  text-align: center;
  color: #fff;
  height: 100%;
  max-width: 100vw;
  padding: 0;
}

 

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
11 hours ago, tuanphan said:

IN above code, you will see this code

/*---- CAPTION HOVER OVERLAYS ------*/
.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;
}

change z-index: -1; (line 4) to   z-index: 999999999999 !important;

/*---- CAPTION HOVER OVERLAYS ------*/
.gallery-caption-grid-masonry {
  opacity: 0;
  z-index: 999999999999 !important;
  transition: all .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  text-align: center;
  color: #fff;
  height: 100%;
  max-width: 100vw;
  padding: 0;
}

You nailed it! Thank you so much for your help.

 

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.