skip to content
HeyBrazadownload →

Framer logoframer · HeyBraza shows you

how to add a hover state in framer

HeyBraza points at the variant tabs and the 'mouse enter' interaction so your hover actually fires.

in framer, a hover effect is really a second variant of a component that you switch to on 'mouse enter'. people get stuck because they design the hover state but never link the interaction, so nothing happens. here's the full path for a button or card.

or do it yourself

  1. 1select your element, right-click, and choose 'create component'.
  2. 2in the variants panel, duplicate the default variant and rename the copy 'hover', then restyle it (color, scale, shadow).
  3. 3select the default variant and add an interaction: on 'mouse enter' → change to the 'hover' variant.
  4. 4add the reverse: on 'mouse leave' → change back to the default variant.
  5. 5set a transition (e.g. spring) so the change animates instead of snapping, then preview by hovering.

let HeyBraza do this with you

HeyBraza is a tiny on-screen guide that points at the right buttons and talks you through it, on windows and mac.

download

common questions

why doesn't my framer hover effect work?

you designed the hover variant but didn't link it - add a 'mouse enter' interaction pointing to the hover variant and a 'mouse leave' back to default.

how do i copy a hover to another variant in framer?

hover/press states don't auto-copy across variants - you re-add the interaction on each variant, or wrap the shared hover on a parent component.

more fixes