Hovering Captions/effects for Images on a Masonry Grid

Hi,

I am trying to create a text on hover after darkening (or if possible blurring) the image underneath. I've managed it before on a simple grid but for some reason it's not working for Masonry.

Also as a side question, would it be possible to add multiple lines of text the to the image description with each line having different styles? I've added a sample image below for reference. 

This is a link to the page on my site (https://www.claireandayesh.com/auto-photography).

Thank you very much!

#1. Can you enable Gallery Caption + add some image caption first? We can check code easier

#2. 2 lines of text or >2 lines?

Each case will need a different solution

On 10/26/2022 at 11:03 AM, tuanphan said:

#1. Can you enable Gallery Caption + add some image caption first? We can check code easier

#2. 2 lines of text or >2 lines?

Each case will need a different solution

Hi, thank you so much for getting back to me!

#1. Sorry about that. I have enabled Captions in the Edit Section settings and have created Captions for the images on the first few rows.

#2. 2 lines of text. Essentially the name of the album and a text underneath it in either a different font or size saying "Click to see more"

On 10/27/2022 at 9:23 AM, Ayesh said:

Hi, thank you so much for getting back to me!

#1. Sorry about that. I have enabled Captions in the Edit Section settings and have created Captions for the images on the first few rows.

#2. 2 lines of text. Essentially the name of the album and a text underneath it in either a different font or size saying "Click to see more"

Hi,

Can you check it again? I don't see any captions

22 hours ago, tuanphan said:

Hi,

Can you check it again? I don't see any captions

Hi, I checked again but I could have done something wrong. Just to double check I've included a few screenshots of what I can see. Also, image description is the same as captions right? or no?

That's weird. Your setting looks correct. But I don't see any caption/description here. Is this right page?

https://www.claireandayesh.com/auto-photography

On 11/4/2022 at 5:25 PM, tuanphan said:

That's weird. Your setting looks correct. But I don't see any caption/description here. Is this right page?

https://www.claireandayesh.com/auto-photography

Yes, that is the correct page.

Do you think the captions are not showing up because of this code I've entered??

 

.gallery-section .gallery-caption p {
  text-align: center;
  font-size: 80px;
  font-weight: 500;
  color: #000000;
  text-transform: normal;
  line-height: 2em;
  font-family: inherit;
}

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.7); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1.8rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

body {
background: #FFFFFF!important;
}

I entered this code to get a similar effect on another page. But that page has a simple grid

2 hours ago, Ayesh said:

Yes, that is the correct page.

Do you think the captions are not showing up because of this code I've entered??

 

.gallery-section .gallery-caption p {
  text-align: center;
  font-size: 80px;
  font-weight: 500;
  color: #000000;
  text-transform: normal;
  line-height: 2em;
  font-family: inherit;
}

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.7); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1.8rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

body {
background: #FFFFFF!important;
}

 

I entered this code to get a similar effect on another page. But that page has a simple grid

Which image did you add caption/description?

On 11/6/2022 at 12:15 PM, tuanphan said:

Which image did you add caption/description?

The first 4 rows of images

Add this to Design > Custom CSS

/* Auto Photography */
body#collection-634bf167cb4d9e41d6ae8574 {
figure.gallery-masonry-item {
    position: relative;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute !important;
    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-wrapper p.gallery-caption-content, .gallery-masonry-item:hover .gallery-caption {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper: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;
    pointer-events: none;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
/* image zoom */
.gallery-masonry-item-wrapper{
    transition: transform 0.5s ease;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper img{
    transform: scale(1.3);
    transition: transform 0.5s ease;
}}}

On 11/21/2022 at 10:52 AM, tuanphan said:

Add this to Design > Custom CSS

/* Auto Photography */
body#collection-634bf167cb4d9e41d6ae8574 {
figure.gallery-masonry-item {
    position: relative;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute !important;
    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-wrapper p.gallery-caption-content, .gallery-masonry-item:hover .gallery-caption {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper: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;
    pointer-events: none;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
/* image zoom */
.gallery-masonry-item-wrapper{
    transition: transform 0.5s ease;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper img{
    transform: scale(1.3);
    transition: transform 0.5s ease;
}}}

 

Added to Custom CSS but the captions show up underneath instead of an hover overlay

https://www.claireandayesh.com/auto-photography

On 12/20/2022 at 7:05 PM, tuanphan said:

It looks like you removed some code in your current code since Nov 21

Use this new code

/* Auto Photography */
body#collection-634bf167cb4d9e41d6ae8574 {
figcaption.gallery-caption.gallery-caption-grid-masonry {
    position: static !important;
}
figure.gallery-masonry-item {
    position: relative;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute !important;
    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;
color: white !important;
}
.gallery-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content, .gallery-masonry-item:hover .gallery-caption {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper: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;
    pointer-events: none;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
/* image zoom */
.gallery-masonry-item-wrapper{
    transition: transform 0.5s ease;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper img{
    transform: scale(1.3);
    transition: transform 0.5s ease;
}}

 

OMG! It works perfectly! Thank so so much for helping me out and your patience throughout! Much appreciated!