Fun Card Hover Interaction in Framer

This is a Framer recreation of the fun card hover interaction, originally conceptualized by Mariana. Feel free to remix the project and see how interactions like this are achieved in Framer.

Created by

Nandi

and

Mariana Castilho

About the resource

Creating interactions like these in Framer is super easy.

For instance, I achieved this by using a component where I designed various variants for each card hover. All I did was move one card to the top for each variant.

After setting up all the variants, all that was left was to connect interactions from the primary variant's cards to the rest of the variants using "mouse enter" triggers. Simple as that!

About the resource

Creating interactions like these in Framer is super easy.

For instance, I achieved this by using a component where I designed various variants for each card hover. All I did was move one card to the top for each variant.

After setting up all the variants, all that was left was to connect interactions from the primary variant's cards to the rest of the variants using "mouse enter" triggers. Simple as that!

About the resource

Creating interactions like these in Framer is super easy.

For instance, I achieved this by using a component where I designed various variants for each card hover. All I did was move one card to the top for each variant.

After setting up all the variants, all that was left was to connect interactions from the primary variant's cards to the rest of the variants using "mouse enter" triggers. Simple as that!

Framer component variants — Component variants needed for the interaction.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

More resources

View all

Hover Text Repeat Effect in Framer
Interaction
Hover Text Repeat Effect in Framer
Interaction
Unusual FAQs Section in Framer
Interaction
Unusual FAQs Section in Framer
Interaction