Hover Animations
What a tile does when the pointer is over it — and the per-state styling that goes with it.
Every gallery has a hover animation, and unless you change it that animation is Zoom. It's the first control on Image & Video Settings → Style.
The five animations
| Animation | What it does | Reads as |
|---|---|---|
| Zoom | The image scales up slightly inside its tile. | "There's more here" — the default for a photo gallery. |
| Lift | The tile rises with a shadow. | "This is a button." Pair it with Custom URL. |
| Tilt | The tile tips toward the pointer. | Playful. Good for a small, showy set. |
| Frame | An inset border draws in over the image. | Editorial, restrained. Works well with Overlay content. |
| Color Pop | The image shifts from muted to full colour. | Strong. Needs a matching Normal-state filter to start from. |
| None | Nothing moves. | Right for a dense wall, or when motion would distract. |
Animation Duration sets how long it takes: 0–2000 ms in steps of 50, defaulting to 500 ms. Below ~150 ms the movement reads as a glitch; above ~800 ms it feels sluggish.
Hover styling is separate, and more powerful
The animation is one control. Below it, a Normal / Hover state switcher scopes everything that follows — so you're really setting two complete looks:
| Per-state control | Typical use |
|---|---|
| Image Filter | Greyscale at rest, full colour on hover. |
| Image Opacity | Dim at rest, full on hover. |
| Image Overlay | A colour scrim that lifts on hover. |
| Image Border | A border that appears on hover. |
| Border Radius | Corner rounding per state. |
| Box Shadow | Depth on hover. |
Set the resting look with Normal selected, flip to Hover, and change only what should move. Anything you leave alone simply stays put.
Color Pop is a shortcut, not a requirement
Color Pop is the built-in version of "muted → colour". You can build the same effect by hand with Image Filter set to greyscale on Normal and unset on Hover — which gives you control over exactly how muted, and lets you combine it with a different animation.
Recipes
Clickable portfolio tiles. Animation Lift, duration 300 ms, Hover Box Shadow on, Hover Border Radius slightly larger. The tile rises and softens — it reads as pressable.
Editorial photo wall. Animation Frame, duration 400 ms, Normal Image Overlay at 0.15 opacity, Hover overlay at 0. The scrim lifts as the frame draws in.
Muted logo wall. Animation None, Normal Image Filter greyscale with Image Opacity 60 %, Hover filter unset and opacity 100 %. Restrained, and no movement at all.
Overlay caption reveal. Animation Zoom, Content Display Style Overlay, Content Visibility → On Hover. The image zooms as the caption slides in.
Things worth knowing
Hover doesn't exist on touch. A phone has no pointer, so a hover-only effect is a desktop-only effect. Anything a visitor needs — a caption that carries meaning, a control — must not be hover-only. Content Visibility → Always is the safe setting when the text matters. Accessibility →
Keyboard focus counts as hover. Tabbing to a tile triggers the same reveal, so a keyboard user sees what a mouse user sees.
Every layout supports it, including Thumbnails and Perspective — it's per-tile styling, not a page-level effect, so the self-contained layouts keep it.
Thumbnails has a second one. Its strip has its own Thumbnail Hover Effects control (Normal, Zoom In, Zoom Out, Slide Up, Slide Down) for the thumbs, separate from the main image's animation.
Respect reduced motion. Visitors who've asked their system for less motion get a calmer treatment. If motion is central to your design, offer the meaning another way too.
Where to go next
- Motion Effects — entrance animations, a different thing
- Titles & Descriptions
- Panel reference