Community forum for knowledge and support

Updated 4 months ago

Layout 348 Hover Effect

At a glance

Hello! Has anyone made a hover effect on Layout 348? I’m struggling adding this and I think it’s because of the way it’s built for the animation. Any help would be appreciated! Read-only link is here.

M
M
4 comments

what kind of hover effect are you trying to achieve and on what element within that component?

I was wanting to achieve something really basic, where if you hover over the image with your cursor, the image opacity would change and reveal a fun image below. I am trying to feature these two images. Any help is much appreciated!

Attachments
Screenshot 2024-09-17 at 1.47.04 PM.png
Screenshot 2024-09-17 at 1.46.36 PM.png

ah yeah the images are stacked on top of each other so doing an opacity would be challenging here. I would say your best bet is to wrap the image in a div, and match the background color of that wrapper div to the background of the section, and then you can try changing the opacity. However I noticed you have a lot more images than you do have sections and I noticed that the is-image1 and is-image2 combo classes were duplicated - so I would first make sure that is all cleaned up so its not so confusing.

The other thing you might have to do is essentially copy/paste the profiles_image class and move that up as your new wrapper class potentially - I noticed when I tested this, it changed the aspect ratio of the image so you'll want that new wrapper div to have the same settings that the current image element has and then make adjustments from there like renaming the actual image element to something else.

If I've lost you, just let me know and I can do a quick loom on it later this evening.

This is so helpful! I will give this a go on my own and if I have any questions, I might poke you!

Add a reply
Sign up and join the conversation on Slack