Community forum for knowledge and support

Updated 3 months ago

Flip effect on hover with two-sided card

At a glance

The community member is asking if there are any components within the Relume library that provide a 180-degree flip effect on hover, creating a 2-sided card. The response from another community member indicates that this type of styling/design detail is not included in the Relume library, but suggests searching the Webflow marketplace for cloneables or tutorials that could help achieve the desired effect.

Hey ! Are there any components within the Relume library right now that do a 180-degree flip effect on hover? Essentially creating a 2-sided card that flips from front-to-back upon mouse hover.

M
S
A
4 comments

nope! That would fall into styling/design details that we would try to avoid. There are likely a lot of cloneables or tutorials out there - I would search the Webflow marketplace for some if you want to learn how to do it!

Hey @Sagona I created a solution to this on a client project of mine recently.

https://preview.webflow.com/preview/hatchery-group-madebyprisma?utm_medium=preview_lin[…]&pageId=67224bee3a70b4656f150d41&locale=en&workflow=preview

You have to create two content divs that hides one or the other with some interactions for an IN and OUT with an X axis animation that makes it seem like it's flipping by condensing the width to 0 when you are simultaneously swapping out the two content cards.

Attachments
Screenshot 2025-02-11 at 9.47.38β€―AM.png
Screenshot 2025-02-11 at 9.48.10β€―AM.png
Screenshot 2025-02-11 at 9.47.23β€―AM.png

I also just realized this was a very old post, oops πŸ™ƒ

Thank you for sending this through, @Sam Gray! I appreciate you taking the time to walk through this. πŸ™‚

Add a reply
Sign up and join the conversation on Slack