Create hover effects using filters

Learn how to apply unique visual effects to any element using filters.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
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. An a filter in the Styles Panel, for example grayscale 100%
  3. Go to the hover state
  4. Set the grayscale filter to 0%
  5. Go back to the none/default state
  6. Add a transition that applies to the filters property

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

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.