Card Hover Interaction

Copy component

Card Hover Interaction

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

Component

Card Hover Interaction

This is a card hover interaction by Dave, recreated as a Framer component. Feel free to copy and paste it to your website and customize it through component properties.

image of Nandi Muzsik
profile image of dave

Created by

Card Hover Interactions
Card Hover Interactions
Card Hover Interactions

About the resource

This component is fully customizable, so all you need to do is copy and paste it into your project, select the component, go to the right panels, and adjust it with the component properties.

About the resource

This component is fully customizable, so all you need to do is copy and paste it into your project, select the component, go to the right panels, and adjust it with the component properties.

About the resource

This component is fully customizable, so all you need to do is copy and paste it into your project, select the component, go to the right panels, and adjust it with the component properties.

card hover Framer component properties

Card hover Framer component properties.

card hover Framer component properties

Card hover Framer component properties.

card hover Framer component properties

Card hover Framer component properties.

With just a couple simple properties, you can make the card fit your designs.

For example, if you want to adopt this design to a light mode design, you can just make the default color black and the background color white.

With just a couple simple properties, you can make the card fit your designs.

For example, if you want to adopt this design to a light mode design, you can just make the default color black and the background color white.

With just a couple simple properties, you can make the card fit your designs.

For example, if you want to adopt this design to a light mode design, you can just make the default color black and the background color white.

Framer card hovers component light mode

Light mode version of the cards.

Framer card hovers component light mode

Light mode version of the cards.

Framer card hovers component light mode

Light mode version of the cards.

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

  • Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

  • Illustration of an invoice document in a blue folder with pricing details for iOS and web apps

    Folder Micro-Interaction in Framer

    Component

    Illustration of an invoice document in a blue folder with pricing details for iOS and web apps

    Folder Micro-Interaction in Framer

    Component

    Illustration of an invoice document in a blue folder with pricing details for iOS and web apps

    Folder Micro-Interaction in Framer

    Component