Component
Fun UI Hover Cards in Framer
This is a Framer recreation of fun UI hover cards by Marko Ilic. Feel free to copy the component to your project and use it to add playful motion and interaction to your designs.
About the resource
To create these hover cards, I first set up the card content with image frames placed using absolute positioning. In the hover variant, I repositioned the image frames and added subtle rotations to bring in motion. For the text animation, I placed one icon relatively and positioned another behind it with absolute placement. On hover, the second icon moves forward into the first icon’s place while the first icon shifts ahead, creating a smooth swap effect. The frame overflow is kept clipped or hidden to maintain a clean layout.
About the resource
To create these hover cards, I first set up the card content with image frames placed using absolute positioning. In the hover variant, I repositioned the image frames and added subtle rotations to bring in motion. For the text animation, I placed one icon relatively and positioned another behind it with absolute placement. On hover, the second icon moves forward into the first icon’s place while the first icon shifts ahead, creating a smooth swap effect. The frame overflow is kept clipped or hidden to maintain a clean layout.
About the resource
To create these hover cards, I first set up the card content with image frames placed using absolute positioning. In the hover variant, I repositioned the image frames and added subtle rotations to bring in motion. For the text animation, I placed one icon relatively and positioned another behind it with absolute placement. On hover, the second icon moves forward into the first icon’s place while the first icon shifts ahead, creating a smooth swap effect. The frame overflow is kept clipped or hidden to maintain a clean layout.
The default and hover variants of the card component.
The default and hover variants of the card component.
The default and hover variants of the card component.
