Copy component
Copy component
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
New
New
New
Animation
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.
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.
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.
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.
The two variants of the card component.
The two variants of the card component.
The two variants of the card component.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
