Adding Overlay Captions to Packed Gallery

Site URL: https://www.thebrattleboro.com/home-1

Hi there, 

I'm looking to use photos as buttons and I would love to have labels overlaying each one. I started with a packed gallery, but I am not sure what CSS I should add to have the captions overlay the images. I want it to look like the screengrab attached.

Thanks in advance for your help!

thebrattleboro.com/home-1

Add to Design > Custom CSS

/* Images overlay */
div#page-section-628fca388c857c062397772f figure a:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    z-index: 900;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Thanks @tuanphan

I think I may have asked in a confusing way. Can I try again?

Is there a way to get these captions to hover OVER the photo while controlling the font styles? It would be even better if they appear on hover. Thank you again!

On 5/27/2022 at 8:57 PM, TheBrattleboro said:

Thanks @tuanphan

I think I may have asked in a confusing way. Can I try again?

Is there a way to get these captions to hover OVER the photo while controlling the font styles? It would be even better if they appear on hover. Thank you again!

You mean

Initial: show image, no text

Hover: show image, show overlay, show text over overlay

Is this right?

On 5/29/2022 at 3:16 AM, tuanphan said:

You mean

Initial: show image, no text

Hover: show image, show overlay, show text over overlay

Is this right?

That is correct! Image with dark overlay and text overlay.

9 hours ago, TheBrattleboro said:

That is correct! Image with dark overlay and text overlay.

Try adding to Design > Custom CSS

/* Masonry hover */
[data-section-id="627ecc448851d864ffb7543e"] {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}}

7 hours ago, tuanphan said:

Try adding to Design > Custom CSS

/* Masonry hover */
[data-section-id="627ecc448851d864ffb7543e"] {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}}

 

Thank you! It's working well, but I wanted to change the font so I injected the following bolded part. Now when I hover, I see the large caption, but as I pull my mouse away, I still see the small caption in the back. How can I adjust this?

 

/* Masonry hover buttons */
[data-section-id="627ecc448851d864ffb7543e"] {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
  
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms 
     !important;
  
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
      font-family: orpheus-pro;
      font-size: 3em;
      color: #F9F8ED;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;

}
/* remove gap */
figcaption {
    padding: 0 !important;
  
}}

15 hours ago, TheBrattleboro said:

Thank you! It's working well, but I wanted to change the font so I injected the following bolded part. Now when I hover, I see the large caption, but as I pull my mouse away, I still see the small caption in the back. How can I adjust this?

 

/* Masonry hover buttons */
[data-section-id="627ecc448851d864ffb7543e"] {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
  
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms 
     !important;
  
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
      font-family: orpheus-pro;
      font-size: 3em;
      color: #F9F8ED;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;

}
/* remove gap */
figcaption {
    padding: 0 !important;
  
}}

edit this

/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms 
     !important;
  
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
      font-family: orpheus-pro;
      font-size: 3em;
      color: #F9F8ED;
}

to this

/* title */
.gallery-caption-content {
      font-family: orpheus-pro;
      font-size: 3em;
      color: #F9F8ED;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms 
     !important;
  
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}

8 hours ago, tuanphan said:

edit this

/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms 
     !important;
  
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
      font-family: orpheus-pro;
      font-size: 3em;
      color: #F9F8ED;
}

to this

/* title */
.gallery-caption-content {
      font-family: orpheus-pro;
      font-size: 3em;
      color: #F9F8ED;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms 
     !important;
  
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}

 

I injected the following code, but the font / type is not changing.

https://www.thebrattleboro.com/home-1

/* Images overlay */
div#page-section-628fca388c857c062397772f figure a:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    z-index: 900;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

//* Masonry hover */
[data-section-id="627ecc448851d864ffb7543e"] {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
      font-family: orpheus-pro;
    font-size: 3em;
    color: #F9F8ED;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms 
     !important;
  
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}}

ah, edit this code

   font-family: orpheus-pro;
    font-size: 3em;
    color: #F9F8ED;

to this

   font-family: orpheus-pro !important;
    font-size: 3em !important;
    color: #F9F8ED !important;