Create hover effects using filters
Filters give you control over visual effects that can apply to an element and its children. These are extremely useful for state changes, like having a grayscale image change to color on hover.
Learn more about filters and other effects.
In this lesson:
You can choose from different filter options:
You can apply a filter just like you can style any class on any element anywhere. You can apply a filter directly on an image — you can also add a filter on an element that has children.
For example, you have 3 Link blocks, all with the same class (e.g., “Price link block”).
To add a Blur filter:
If you return to the Filter dropdown menu and switch from Blur to Grayscale, the Link blocks and their children become grayscale.
To add a brightness filter on top of the grayscale filter:
In this example, both filters — Grayscale and Brightness — are set up like layers. You can toggle each filter’s visibility, or drag each of the layers around to change their order.
To adjust the filter on an element while in a different state:
The Hover state inherits properties from the None state (which is what you were styling when you initially set up Grayscale and Brightness filters). As a result, those filters remain exactly the same.
To change filters in the Hover state:
Hover over the Link blocks to see these updated effects in action.
Add a transition to smooth the filter effects between None and Hover states:
This will apply a transition to any filter(s) you’ve set to change between the None and Hover states.
Play with the duration of the transition, and hover over the Link block to see the transition duration in action. In this case, the default of 200 milliseconds looks good. Continue adding filters to elements within your project, and give your designs some extra interest and interactivity!