Help with hovering Captions & effects for images on a Masonry Grid

Hi,

I am trying to create a text on hover after darkening (or if possible and preferred -- blurring) the image underneath using a Masonry grid gallery. How do I do that with code? Additional question is would I have the ability to change fonts? Do I keep the Lightbox feature on?

For example like how did sample Squarespace site did it (but I would love if my captions showed up quicker): https://www.claireandayesh.com/auto-photography

This is a link to the page on my site here: https://www.aminakahmad.com/photography

Thank you so very much ahead of time. I am so confused right now hahaha.

Appreciate ALL the help.

Best,

Amina

5 hours ago, aminakahmad said:

 

Hi,

I am trying to create a text on hover after darkening (or if possible and preferred -- blurring) the image underneath using a Masonry grid gallery. How do I do that with code? Additional question is would I have the ability to change fonts? Do I keep the Lightbox feature on?

For example like how did sample Squarespace site did it (but I would love if my captions showed up quicker): https://www.claireandayesh.com/auto-photography

This is a link to the page on my site here: https://www.aminakahmad.com/photography

Thank you so very much ahead of time. I am so confused right now hahaha.

Appreciate ALL the help.

Best,

Amina

Add caption on each image and enable the caption. Then I can provide you code for the hovering effect 

13 hours ago, Web_Solutions said:

Add caption on each image and enable the caption. Then I can provide you code for the hovering effect 

@Web_Solutions - Thank you so much! I added captions to the site and enabled captions to show. Thank you so much for your helping with this. Two things -- 1) Would love if the part of my caption that is in the brackets show up on the second line of the hovered caption. 2) Also, is there a way to only enable the hover caption feature for masonry grid galleries for only this specific webpage? I wouldn't want it messing with the other masonry grid galleries on the other webpages! Thank you in advance.

@Web_Solutions I was playing around and was able to get it in somewhat of a decent place (YAY!!!) but two questions still:

1 -- Can I have the hovering captions only show up on that particular page (https://www.aminakahmad.com/photography). I don't want it messing with any gallery grids on the other pages.

2 -- Can I adjust the font size and font type for the hovering captions?

Thank you so much!!!

@Web_Solutions AMAZING. That worked like a charm -- thank you, thank you SO MUCH.

Hello @Web_Solutions but exactly where do I paste this code to specifically relate to my masonry grid? I'm having trouble figuring out where to put the code. When I add a block and add "code" and use the pencil to edit and paste your code, it just shows up as plain text. 

On 3/21/2024 at 5:59 AM, ArcherDougherty said:

Hello but exactly where do I paste this code to specifically relate to my masonry grid? I'm having trouble figuring out where to put the code. When I add a block and add "code" and use the pencil to edit and paste your code, it just shows up as plain text. 

You need to add it to Website > Website Tools > Custom CSS

Thank you! How do I apply this hovering effect only to image galleries that are also clickthrough links? I don't want it to affect all the galleries, as I'm an artist and that's a lot of images lol. I've been through so many forum threads and can't find a simple solution and none of the code is working anymore, as all I've found is a few years old at this point. My website is https://cobalt-mustard-hn3a.squarespace.com/ and is still in trial

On 3/27/2024 at 9:39 PM, ArcherDougherty said:

Thank you! How do I apply this hovering effect only to image galleries that are also clickthrough links? I don't want it to affect all the galleries, as I'm an artist and that's a lot of images lol. I've been through so many forum threads and can't find a simple solution and none of the code is working anymore, as all I've found is a few years old at this point. My website is https://cobalt-mustard-hn3a.squarespace.com/ and is still in trial

 

You can follow this to share url.

And which page you want to apply effect? or apply for all pages, but for Linked Image only?