Community forum for knowledge and support

Updated 5 months ago

Layout 348 Hover Effect

At a glance

A community member is struggling to add a hover effect on Layout 348 and is seeking help. They want to achieve a basic hover effect where the image opacity changes and reveals another image below. Another community member suggests wrapping the image in a div, matching the background color of the wrapper div to the section background, and then changing the opacity on hover. They also note that the community member has duplicate classes and recommend cleaning that up first. The community member finds the suggestions helpful and plans to try them out, potentially reaching out again if they have any further questions.

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