Hover Effect for Masonry Grid | 7.1 | CSS

Hi!

Trying to use custom css to add a hover over effect on a masonary grid gallery. 

Everything working ace EXCEPT, when the caption copy runs over to two lines, it changes from center to left align 😞

Here's the code - any ideas? 

I can't add any code to head tag as the subscription level my friend has isn't high enough.

/* gallery Hover effect */

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-size: 30px !important;
    color: #FFFFFF;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: #000000; /* 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;
}

Can you share your website URL and this page?

Hi! Here it is 🙂

https://recorder-smilodon-sgbl.squarespace.com/home-concept

Thank you so much for that Ziggy!

Hi, all. 

• when I am not hovering over image, I can see a faint/small version of the caption on the image (see screenshot)
• Mobile - I know hover doesn't work on mobile screens, so what CSS do I need to add to always display caption (beneath image) on mobile? I need a I experimented with several solutions found on various posts, but don't have it working yet. 

On 3/21/2024 at 2:17 AM, christined said:

Hi, all. 

I implemented the CSS in this thread but have a couple issues - 

• when I am not hovering over image, I can see a faint/small version of the caption on the image (see screenshot)
• Mobile - I know hover doesn't work on mobile screens, so what CSS do I need to add to always display caption (beneath image) on mobile? I need a I experimented with several solutions found on various posts, but don't have it working yet. 

I am using Masonry Grid in portfolio pages.

angelaart.net/work

pw angela

 

 anyone -- have any advice for how to tweak my css to resolve these things?

Thanks for any help you can offer!

Christine

 

 

 

For masonry under Installs text?

I see you disabled Gallery Caption, can you enable it & add some captions? Then we can check problem easier

On 3/25/2024 at 5:11 AM, tuanphan said:

For masonry under Installs text?

I see you disabled Gallery Caption, can you enable it & add some captions? Then we can check problem easier

Hi, @tuanphan. Thanks for your reply. I solved this issue with help from someone in another post.  I did just reply to another post of yours about a separate issue with Mobile padding and image width on that "Installs" masonry gallery, in case you have any ideas about that. 🙂

Thanks for being such a present and helpful member of this community!! Your posts have helped me countless times.

In case it can help someone else -- I solved my issue with suggested solution in this post: