Filters

Create hover effects using filters

This video features an old UI. Updated version coming soon!
 
This video features an old UI. Updated version coming soon!

When adding hover effects on elements such as images, you can create unique effects using filters to style and transition between the default state and the hover state.

Learn more about filters and other effects.

  1. Select an element
  2. Click the plus icon (+) for Filters in the Style panel (e.g. Set grayscale to 100%)
  3. Go to the Hover state
  4. Set the grayscale filter to 0%
  5. Go back to the None state
  6. Add a transition that applies to the Filters property

Learn more about styling states and smoothing the animation between states with transitions.

Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback