Webflow hover effects use CSS Transitions in the Style Panel combined with Hover state styling — no Interactions panel required for most effects. Select your element, switch the States dropdown to Hover, change the style property (scale, color, opacity, filter), then add a Transition in the None state to animate the change smoothly. For overlay reveals and multi-element hover effects, use the Interactions panel Mouse Hover trigger.
Webflow Hover Effects: Zoom, Color, Opacity, and Overlay Reveal
Webflow supports two distinct methods for hover effects. CSS hover states (via the Style Panel States dropdown) handle single-element property changes like color shifts, scale zoom, and opacity fades — these are pure CSS and extremely performant. For more complex effects that affect child elements or siblings on hover (such as an overlay that appears over an image), you use the Interactions panel's Mouse Hover trigger. This tutorial covers both approaches with specific recipes for the most common hover patterns designers need.
Prerequisites
- A Webflow project open in the Designer
- At least one element to hover — a card div, button, or image works well
- Familiarity with the Style Panel (S) and States dropdown
Step-by-step guide
Set up a hover zoom on an image card
Set up a hover zoom on an image card
Select your image element. Give it a class name like 'card-image' in the Style Panel (S) selector field. Now switch the States dropdown (below the selector field) from 'None' to 'Hover'. In Style Panel → Effects → 2D & 3D Transforms, click '+' and choose 'Scale'. Set both X and Y scale to 1.08 (8% zoom). Switch the States dropdown back to 'None'. In Style Panel → Effects → Transitions, click '+'. Set Property to 'Transform', Duration to 400ms, Easing to 'Ease'. The transition must be on the None (base) state — not the Hover state — so it animates in both directions.
Expected result: Hovering over the image smoothly zooms it in 8% and reverting the hover smoothly zooms it back out.
Add a color change hover on a button
Add a color change hover on a button
Select your button element. Assign class 'hover-btn' in the Style Panel selector. With the States dropdown on 'Hover', go to Style Panel → Backgrounds and change the background color to your hover color (e.g., a darker shade). Still in Hover state, optionally change the text color in Style Panel → Typography → Font Color. Switch back to 'None' state. Add a Transition: Style Panel → Effects → Transitions → '+'. Set Property to 'Background Color', Duration to 250ms, Easing to 'Ease'. Add a second Transition for 'Color' (text) with matching duration. Both properties need their own Transition entry.
Expected result: Button background and text color shift smoothly on hover with a 250ms crossfade.
Create an opacity fade hover effect
Create an opacity fade hover effect
Select your element (e.g., a navigation link or portfolio item). Give it class 'fade-link'. In States dropdown → Hover: Style Panel → Effects → Opacity → set to 70%. Switch back to None state. Add a Transition: Property 'Opacity', Duration 200ms, Easing 'Ease'. For a sibling-dimming effect (hovering one card dims all others), you need the Interactions panel approach: apply Opacity 100% in Hover state on the parent collection, and in the Interactions panel use Mouse Hover trigger with 'Affect Different Element' set to the sibling class.
Expected result: Element dims to 70% opacity on hover, returning to full opacity on mouse-out with a smooth 200ms transition.
Build an overlay reveal on a card using Mouse Hover trigger
Build an overlay reveal on a card using Mouse Hover trigger
Structure your card: create a div block with class 'card-wrap', set its Position to Relative. Inside add your image, then add another div block class 'card-overlay' — set it Position Absolute, Top 0, Right 0, Bottom 0, Left 0 (fill the parent), add a dark semi-transparent background color, and set its initial Opacity to 0%. Select the 'card-wrap' element. Go to Interactions panel (H) → Element triggers → '+ Add trigger' → 'Mouse Hover'. In 'On Hover In': click 'Start an Animation' → New Animation named 'Card Overlay In'. Add action: target the 'card-overlay' (use 'Affect class: card-overlay' with 'Limit to nested elements' scope). Set Opacity to 100%, duration 0.3s, Ease Out. In 'On Hover Out': new animation 'Card Overlay Out' — Opacity back to 0%, 0.2s, Ease In.
Expected result: A dark overlay smoothly appears over the card image on hover and disappears on mouse-out. The image underneath remains in place.
Add a filter effect hover — brightness dimming or blur
Add a filter effect hover — brightness dimming or blur
Select your element (typically an image or background). In States dropdown → Hover: Style Panel → Effects → Filters → '+'. For dimming: choose 'Brightness', set to 70%. For blur: choose 'Blur', set to 4px. Both can be stacked. Switch to None state and add a Transition: Property 'Filter', Duration 300ms, Easing 'Ease'. Note: Webflow's Transition property selector includes 'Filter' as an option — select it explicitly rather than using 'All' which animates every property and can cause performance issues.
Expected result: Image dims or blurs smoothly on hover, creating a focus-directing effect.
Reveal text content on card hover
Reveal text content on card hover
Inside your 'card-wrap' div, add a text div 'card-info' below the image. Set 'card-info': Position Absolute, Bottom 0, Left 0, Right 0, with a gradient background (dark at bottom, transparent at top). Set initial Transform Move Y to 100% (hidden below the card). In 'card-wrap' Interactions → Mouse Hover → On Hover In animation: target 'card-info' with Limit to nested elements scope. Animate Move Y from 100% to 0%, duration 0.35s, Ease Out. On Hover Out: Move Y back to 100%, 0.25s, Ease In. The parent 'card-wrap' needs Overflow Hidden (Style Panel → Size → Overflow → Hidden) to clip the sliding text.
Expected result: Text block slides up from below the card on hover and slides back down on mouse-out, with the parent's overflow hidden keeping it clipped.
Use hover with 'All' transition vs per-property transitions
Use hover with 'All' transition vs per-property transitions
A common shortcut is to set Transition Property to 'All' — this applies a transition to every property that changes on hover. While convenient, it can produce unintended animation of properties you did not want to animate (e.g., Display, Width changes causing layout jumps). For production, always set individual Transition entries for specific properties: one for 'Transform', one for 'Opacity', one for 'Background Color'. This also improves performance since the browser only watches specific properties for changes rather than the entire computed style.
Expected result: Transitions are explicit and controlled — no unexpected animations on unrelated properties.
Complete working example
1Standard hover effects (zoom, color, opacity, filter, overlay reveal) are fully achievable via Webflow's Style Panel States dropdown and Interactions panel Mouse Hover trigger. Custom code is only needed for advanced hover patterns like cursor-following effects (Mouse Move Over Element trigger in Interactions) or CSS :has() selectors for parent-based hover logic. If needed, add custom CSS to Page Settings > Before </head> Code or via an Embed element.Common mistakes
Why it's a problem: Hover transition only plays one way — the element snaps back instantly on mouse-out
How to avoid: You added the Transition to the Hover state instead of the None state. Transitions defined on Hover only apply when entering the hover state. Move the Transition to the None state in the States dropdown: Style Panel → select None in States → Effects → Transitions → add your transition there.
Why it's a problem: Scale zoom on an image breaks out of the card container
How to avoid: The parent container is missing Overflow Hidden. Select the parent div → Style Panel → Size → Overflow → set to Hidden. The scaled image will now be clipped to the container boundary.
Why it's a problem: Mouse Hover interaction affects ALL cards on the page instead of just the hovered one
How to avoid: The interaction target scope is set to 'Class' without a limiting scope. In the Interactions panel, when targeting the overlay or child element, change the scope from 'Class: card-overlay' to 'Class: card-overlay' + enable 'Limit to nested elements'. This restricts the target to children of the specific element that was hovered.
Why it's a problem: Hover effects work in Designer but look wrong in Preview or on the live site
How to avoid: The Designer canvas renders hover states statically when you select Hover in the States dropdown. To test hover animations dynamically, always use Preview mode (click the eye icon top-right) or test on your published staging URL. Some CSS interactions, especially Transitions, only play correctly in a live browser context.
Best practices
- Always add Transitions to the None (base) state, not the Hover state — this ensures the animation plays both on hover-in and hover-out
- Set specific Transition properties (Transform, Opacity, Background Color) rather than 'All' to avoid animating unintended properties
- Use Transform Scale for zoom instead of Width/Height — Scale is GPU-accelerated and won't cause layout reflow
- Set Overflow Hidden on image containers before applying Scale hover zoom to prevent the image breaking out of its bounds
- For multi-element hover effects (parent hover affects child), use Interactions panel Mouse Hover trigger with 'Limit to nested elements' scope
- Keep hover transition durations between 150ms and 400ms — slower feels sluggish for a direct mouse interaction
- Test hover states in Preview mode (eye icon) not just in the Designer canvas — some hover state styles only render correctly in Preview
- Avoid hover interactions on mobile: touch devices have no hover state. Use the Interactions panel breakpoint checkboxes to disable hover animations on Phone breakpoints
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building a Webflow portfolio site and want to add hover effects to image cards. I need: 1) an image zoom effect using CSS Scale transform, 2) a dark overlay that fades in over the image on hover, 3) text that slides up from the bottom of the card on hover. Explain which effects to do with CSS States in the Style Panel vs Interactions panel Mouse Hover trigger, and give me the exact Webflow UI steps for each.
Add a hover zoom effect to all elements with class 'card-image': on hover, scale to 1.08 with a 400ms Ease transition. The parent 'card-wrap' should have Overflow Hidden. Also create a Mouse Hover interaction on 'card-wrap' that fades in a nested 'card-overlay' element from Opacity 0 to Opacity 100% in 300ms on hover-in, and reverses on hover-out.
Frequently asked questions
Can I hover over a parent element and style a child element using only CSS states?
No. Webflow's CSS hover states in the States dropdown only apply to the element that is actually hovered — you cannot use them to style a sibling or child element based on a parent hover. For that pattern (parent hover → child changes), you must use the Interactions panel Mouse Hover trigger with 'Affect Different Element' or 'Limit to nested elements' scope, or write custom CSS using the parent:hover .child selector in an Embed element.
Does using 'All' for Transitions slow down my site?
Using 'All' tells the browser to watch every CSS property on that element for changes and animate any that shift on hover. This is more computationally expensive than listing specific properties. For a few elements it makes no measurable difference, but on pages with many elements (e.g., CMS list items) it is better practice to specify Transform, Opacity, and Background Color individually. It also prevents unexpected animation of Display or Visibility properties.
Why don't hover effects work on mobile phones?
Mobile touch devices don't have a hover state — they have a tap state. A 'hover' briefly fires on the first tap before the click event, but it is unreliable and not designed for hover-reveal patterns. Use the Interactions panel to disable hover interactions on Phone breakpoints using the breakpoint checkboxes in the trigger settings. Consider using Click/Tap interactions as the mobile equivalent of hover reveals.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation