Hover animations
A hover animation is a single class that plays a pure CSS effect while the pointer sits over an element — no module needs turning on and no script needs to load. Best on buttons, cards and icons. Use only one hover class per element.
See it live: Hover animations on fancyanimations.com.
Animations
| Animation | On hover |
|---|---|
| Float | Lifts slightly and scales up a little |
| Float + shadow | Same lift, with a drop shadow added |
| Zoom | Grows, with a springy easing curve |
| Zoom out | Shrinks slightly, same springy curve |
| Wobble — horizontal / vertical | Shakes side to side / up and down, settling back to rest |
| Wobble — top / bottom anchored | A skewed wobble, pinned at the bottom or top edge |
| Ring (4 palette colours × 3 sizes) | A colour ring pulses outward once per hover |
- Float and Zoom are CSS transitions — the element gets a half-second
transition: all, which means any other hover change you've added yourself (a colour change, say) also takes half a second now. - Wobble and Ring are short (0.7s) keyframe animations that replay every time the pointer enters.
- Ring colours come from the site's animation colour palette.
- On touch screens, hover effects only ever show on tap, if at all — design around that rather than relying on them.
If the same element also has an entrance animation, hovering it stops the entrance animation and shows its finished state — that's expected behaviour, not a bug.
- Bricks
- Etch
- Gutenberg
Style tab → hover Animations. Add the animation from the dropdown (names match the table above, without any prefix).
One hover animation per element, picked in the Style tab.
Add the class from the Fancy → Hover panel — it keeps one hover effect at a time, same as the other builders.
There's no dedicated hover panel in the block editor. Add the class by hand in the block's Advanced → Additional CSS class(es) field.
Common problems
- Float or Zoom snaps instead of easing smoothly. The same element also has a
scroll trigger class, which forces every transition on it to 0s — and a
scroll preset may also be writing
transform, which would conflict anyway. Put the hover class on a wrapper or child instead, or (3.2.0+) turn on Allow own transitions on the scroll-animated element. - A hover transform fights another transform on the same element. A mouse animation or your own custom transform is competing with Float/Zoom for the same CSS property. Keep one transform source per element and nest the effects instead.
- The ring is invisible. The chosen palette colour is too close to the background colour (a white ring on a white card, say). Pick a different palette variant.