Fluid Card Hover in Framer

Copy component

Fluid Card Hover 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

Animation

Fluid Card Hover in Framer

This is a fluid card hover component in Framer, recreated from the sonarmusic website. On hover, the image zooms in subtly, and the text animates for emphasis. It’s ready to be copied into any project—experiment and adjust for your own style.

image of Nandi Muzsik
image of Prianca S.

Created by

Minimalist silver camera with manual dials for ISO and shutter speed
Minimalist silver camera with manual dials for ISO and shutter speed
Minimalist silver camera with manual dials for ISO and shutter speed

About the resource

To create a fluid card hover effect in Framer, simply set up two components, each with two variants.

The first component controls the card's image zoom and brightness drop, with text shifting over the image on hover. The second component is a button that switches from absolute (hidden) to relative (visible) on hover, with the icon changing direction. Framer animates these transitions smoothly, giving the card a smooth transition on hover.

About the resource

To create a fluid card hover effect in Framer, simply set up two components, each with two variants.

The first component controls the card's image zoom and brightness drop, with text shifting over the image on hover. The second component is a button that switches from absolute (hidden) to relative (visible) on hover, with the icon changing direction. Framer animates these transitions smoothly, giving the card a smooth transition on hover.

About the resource

To create a fluid card hover effect in Framer, simply set up two components, each with two variants.

The first component controls the card's image zoom and brightness drop, with text shifting over the image on hover. The second component is a button that switches from absolute (hidden) to relative (visible) on hover, with the icon changing direction. Framer animates these transitions smoothly, giving the card a smooth transition on hover.

Camera UI with hover interaction showing text and explore button

The two variants of the card component.

Camera UI with hover interaction showing text and explore button

The two variants of the card component.

Camera UI with hover interaction showing text and explore button

The two variants of the card component.

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

  • 3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

  • Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation