CSS HOVER ON MASONRY COVER IMAGES MATSUYA

Site URL: https://green-teal-cz6t.squarespace.com/config/design/custom-css

Hey there,

I'm using the masonry design for my homepage running on Matsuya. I'm fairly competent with the rest of what I'd like to do but one thing that's really grinding my gears is trying to make the images hover when they are rolled over.

Because I quite like the no spacing between the images (and even if there was space) I think it'd be quite functional to show it will click through if the image shrinks, goes monochrome, enlarges or loses opacity....you know what I mean...?

Is there a simple few lines of css I can drop in to make this work? I notice there is a small disclaimer saying it might not be possible...but I'd like to circumnavigate that. Surely there must be a way?

Attached in an example of my feeble attempts...basically I would like the wall to become interactive. I can make it click through to pages, but to animate a hover over would be ideal. Also attached some hypothetical illustrations of what I'm trying to achieve.

Thanks in advance.

Your page needs to be set up with a password so we can see it

12 hours ago, rwp said:

Your page needs to be set up with a password so we can see it

Ah, thanks. Ok. I believe I have just done that...though when I go to save SS seems to automatically revert the password to an unknown and much longer one than what I am typing.

FWIW I changed the password to hoverhelp2020. Give that a go if you have some time. In the meantime I shall have another look.

🙂

.gallery-masonry-item img:hover {
    transform: scale(.9);
}