Fun Card Hover Interaction in Framer

Copy component

Fun Card Hover Interaction in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Interaction

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.

Fun Card Hover Interaction in Framer
Fun Card Hover Interaction in Framer
Fun Card Hover Interaction in Framer

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 component variants

Component variants needed for the interaction.

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.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

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

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

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

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Dark interface showing 'Sell Digital Art' button with eBook and Software text, featuring modern minimalist design

    3D Picker Wheel Interaction in Framer

    Interaction

    Dark interface showing 'Sell Digital Art' button with eBook and Software text, featuring modern minimalist design

    3D Picker Wheel Interaction in Framer

    Interaction

    Dark interface showing 'Sell Digital Art' button with eBook and Software text, featuring modern minimalist design

    3D Picker Wheel Interaction in Framer

    Interaction

  • Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction

    Dynamic Action Bar in Framer

    Dynamic Action Bar in Framer

    Interaction