Day 2/365 of Framer Animations

Today's topic is Hover Effects.

I know it's basic, and most of you already know it. But hover effects are incredibly versatile, and with a little creativity, you can create endless variations.

In this video, I show a few practical examples.

The first examples use hover effects on buttons to indicate that an element is clickable, which is very important for users to understand. They're also great for micro-interactions, like the four titles shown in the video. When you hover over them, the text turns black and a white background appears behind it.

That background is actually a text layer inside a stack, converted into a component with a fill color applied on hover. The stack lets me place the background behind the text while inverting the text color.

The lower example comes from a fashion agency template I designed myself (you can see the full website on my profile). Here, the button becomes a lighter gray when hovered. Once clicked, it changes into a different state called Pressed.

Hover = cursor over the element. Pressed = mouse button held down or clicked.

The final example is a card inspired by a Framer University tutorial. The original version flipped like a playing card with a 3D effect, but I removed those variants and kept only the hover interaction. I changed the color, added +2 gap (spacing between elements), and applied a subtle stroke around the image.

To create a component, right-click an element and select Create Component, or use Ctrl + Shift + K on Windows.

Then click the "+" button and add a Hover variant. Inside that state, modify whatever you want: colors, spacing, opacity, size, or additional information. Framer will automatically animate the transition between states.

Remix link: https://framer.link/oo0WpGy

I originally wrote about 1,400 more characters, but Framer has a message length limit. One day I'll probably create my own website so I can share the complete versions.

Day 2/365 of Framer Animations

Today's topic is Hover Effects.

I know it's basic, and most of you already know it. But hover effects are incredibly versatile, and with a little creativity, you can create endless variations.

In this video, I show a few practical examples.

The first examples use hover effects on buttons to indicate that an element is clickable, which is very important for users to understand. They're also great for micro-interactions, like the four titles shown in the video. When you hover over them, the text turns black and a white background appears behind it.

That background is actually a text layer inside a stack, converted into a component with a fill color applied on hover. The stack lets me place the background behind the text while inverting the text color.

The lower example comes from a fashion agency template I designed myself (you can see the full website on my profile). Here, the button becomes a lighter gray when hovered. Once clicked, it changes into a different state called Pressed.

Hover = cursor over the element. Pressed = mouse button held down or clicked.

The final example is a card inspired by a Framer University tutorial. The original version flipped like a playing card with a 3D effect, but I removed those variants and kept only the hover interaction. I changed the color, added +2 gap (spacing between elements), and applied a subtle stroke around the image.

To create a component, right-click an element and select Create Component, or use Ctrl + Shift + K on Windows.

Then click the "+" button and add a Hover variant. Inside that state, modify whatever you want: colors, spacing, opacity, size, or additional information. Framer will automatically animate the transition between states.

Remix link: https://framer.link/oo0WpGy

I originally wrote about 1,400 more characters, but Framer has a message length limit. One day I'll probably create my own website so I can share the complete versions.