Hovering Captions on Images in Gallery w/ Masonry Grid

Site URL: https://www.averyyoungphotography.com

I would like to add captions to my images that only appear when you hover. Located on my homepage gallery (work), using a masonry grid - Just like https://www.oliviabossert.com 

Thanks!

6 hours ago, Avery-Stock said:

Site URL: https://www.averyyoungphotography.com

I would like to add captions to my images that only appear when you hover. Located on my homepage gallery (work), using a masonry grid - Just like https://www.oliviabossert.com 

 

Thanks!

Hi. Can you add some demo captions? We can check & give the code to make hover effect easier

Just added some onto my site.

Thank you  

On 7/12/2021 at 2:34 AM, Avery-Stock said:

Just added some onto my site.

Thank you  

Add to Design > Custom CSS

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;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

Thank you so much! If I wanted to move it the bottom of the picture and have a grey background, similar to https://www.oliviabossert.com  how would I do that? 

11 hours ago, Avery-Stock said:

Thank you so much! If I wanted to move it the bottom of the picture and have a grey background, similar to https://www.oliviabossert.com  how would I do that? 

use this new code

figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 10% !important;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,1); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    height: 10%; /* overlay height */
    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;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

Hi @tuanphan could you please help me to do a mixture of the two things you did above. 

I've used the top code so that my text hovers over the image in my masonry gallery. I'd like it to have a grey overlay when I hover over it as well. 

Do I change the font size to be larger in my style settings or is that code? 

website: https://www.yespeach.com.au/work

Thank you very much! 

On 4/27/2022 at 6:54 PM, L_Gal said:

Hi @tuanphan could you please help me to do a mixture of the two things you did above. 

I've used the top code so that my text hovers over the image in my masonry gallery. I'd like it to have a grey overlay when I hover over it as well. 

Do I change the font size to be larger in my style settings or is that code? 

website: https://www.yespeach.com.au/work

 

Thank you very much! 

The url doesn't work. Can you check it again?

With above code, to change overlay color, change line 2 in this code

/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,1); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    height: 10%; /* overlay height */
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}

To change caption text size, you can add this code under

.gallery-caption-content * {
	font-size: 10px !important;
}

On 4/30/2022 at 6:23 PM, tuanphan said:

The url doesn't work. Can you check it again?

With above code, to change overlay color, change line 2 in this code

/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,1); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    height: 10%; /* overlay height */
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}

To change caption text size, you can add this code under

.gallery-caption-content * {
	font-size: 10px !important;
}

 

Hi @tuanphan!
On mobile captions aren't visible with this – is there a way to turn them on either as an overlay or underneath the image for mobile devices?
Thank you!

On 8/5/2022 at 11:46 AM, marieschultz said:

Hi @tuanphan!
On mobile captions aren't visible with this – is there a way to turn them on either as an overlay or underneath the image for mobile devices?
Thank you!

You mean make overlay + title always visible on mobile?

On 7/13/2021 at 8:17 AM, tuanphan said:

Add to Design > Custom CSS

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;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

Hey! I've added this code to my site, which works great. I was wondering if you could help with something. When I add a long caption to an image (enough words that the caption becomes two lines of text), the caption becomes left justified. Is there a way to have it always be center oriented, even with two lines of text?

On 5/14/2023 at 6:47 AM, sequoyahimages said:

Hey! I've added this code to my site, which works great. I was wondering if you could help with something. When I add a long caption to an image (enough words that the caption becomes two lines of text), the caption becomes left justified. Is there a way to have it always be center oriented, even with two lines of text?

Can you share link to page where you have problem? We can check code easier

On 7/14/2021 at 9:45 AM, tuanphan said:

use this new code

figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 10% !important;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,1); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    height: 10%; /* overlay height */
    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;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

 

Hey Guys, two questions:
just added this code to my website and it works awesome... (thank you for that)
Question 1: Is there a way to just let it work on the home page so that the gallerys on the other pages are not affected by it ???
Question 2: Can i make the Type n the overlay bold?
Much appreciated, cheers
G
Website: https://heron-radish-mbhe.squarespace.com/
Password: Kunst

On 9/21/2023 at 2:09 PM, GPUNK said:

Hey Guys, two questions:
just added this code to my website and it works awesome... (thank you for that)
Question 1: Is there a way to just let it work on the home page so that the gallerys on the other pages are not affected by it ???
Question 2: Can i make the Type n the overlay bold?
Much appreciated, cheers
G
Website: https://heron-radish-mbhe.squarespace.com/
Password: Kunst

 

#1. Change code to this

body.homepage {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 10% !important;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,1); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    height: 10%; /* overlay height */
    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;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}

#2. Whole text bold or which text?

Reading through this string and using the code but it's not working at all on my site (not live yet)

Well, sometimes it works in the "edit" mode, but not to all of the images I have captions with. 

???

On 9/26/2023 at 11:15 PM, jodiep67 said:

Reading through this string and using the code but it's not working at all on my site (not live yet)

Well, sometimes it works in the "edit" mode, but not to all of the images I have captions with. 

???

Can you share link to page where you use gallery? We can check easier

got it, thank you so much!!!!!

On 9/23/2023 at 10:52 AM, tuanphan said:

#1. Change code to this

body.homepage {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 10% !important;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,1); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    height: 10%; /* overlay height */
    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;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}

#2. Whole text bold or which text?

Thanks for this @tuanphan I would love for the captions to be clickable to the image link as well

On 11/18/2023 at 5:31 AM, Civic said:

Thanks for this @tuanphan I would love for the captions to be clickable to the image link as well

Can you share link to page where you use gallery?

Hello @tuanphan I just solved.

Here my custom code:

/////Grid Porfolio/////
.gallery-caption-grid-masonry {
  opacity: 0;
  z-index: -1;
  transition: all .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  text-align: center;
height: 100%;
padding: 0;
transition: all 0.3s ease-in-out !important;
}

.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 0.3s ease-in-out !important;
}

.gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
  height: auto;
  transition: all 0.3s ease-in-out !important;
}

.gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
  transition: all 0.3s ease-in-out !important;
}

.gallery-masonry-item:hover .gallery-caption-grid-masonry:before {
  opacity: 1;
  transition: all 0.3s ease-in-out !important;
}

.gallery-caption-grid-masonry .gallery-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out !important;
  
}

.gallery-caption-grid-masonry p.gallery-caption-content {
  z-index: 1000;
  font-size: 1.5rem;
  font-family:'ProximaNova-Light.otf';
  color:#000;
  transition: all 0.3s ease-in-out !important;

}

/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(255,255,255,1);
  transition: all 0.3s ease-in-out !important;/* overlay color */
    content: "";
    display: block;
    position: absolute;
    height: 10%; /* overlay height */
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
transition: all 0.3s ease-in-out !important;
  height:100%;

}
.gallery-masonry-item-wrapper{
border-radius:5px;
}
.gallery-masonry-item-wrapper a{
transform:scale(1);
transition: all 1s ease-in-out;
&:hover{
transform:scale(1.03);
transition: all 1s ease-in-out;
}
}

.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
transition: all 0.3s ease-in-out !important;
}

.gallery-caption-grid-masonry .gallery-caption-content{
 transition: all 1s ease-in-out !important; 
}
/////Grid Porfolio/////

https://faas-dev.squarespace.com/sample

pass:helloworld

Hello, I used the first code in this thread and it worked great, thank you!  How can I have the caption text in 3 lines instead of one on the hover?

This is what I want:

Rocking Duet 
Steel, Glass
4 x 2 x 1.5 ft

This is what I currently have:

Rocking Duet Steel, Glass 4 x 2 x 1.5 ft

This is the current code I am using:

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;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

Thank you so much!

On 11/25/2023 at 8:10 AM, hsmq said:

Hello, I used the first code in this thread and it worked great, thank you!  How can I have the caption text in 3 lines instead of one on the hover?

This is what I want:

Rocking Duet 
Steel, Glass
4 x 2 x 1.5 ft

This is what I currently have:

Rocking Duet Steel, Glass 4 x 2 x 1.5 ft

This is the current code I am using:

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;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

Thank you so much!

You will need to adjust code a bit, but first to add line break to 3 lines, you edit the text from this

Rocking Duet Steel, Glass 4 x 2 x 1.5 ft

to this

Rocking Duet<br/> Steel, Glass <br/>4 x 2 x 1.5 ft

this will break to 3 lines, however maybe they will overlap together, if this problem appears, let me know your site url, we will give code to add space

Thank you! That solved!  Is there a way to now center justify the hover caption?

On 11/27/2023 at 2:03 AM, hsmq said:

Thank you! That solved!  Is there a way to now center justify the hover caption?

Can you share link to page where you use gallery?

Yes, it is on the homepage here https://www.johnmathewsculpture.com

Thank you!