Filters

Create hover effects using filters

layout-design
 
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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: 

  1. Understanding filters
  2. Adding filters
  3. Adjusting states
  4. Adding transitions

Understanding filters

You can choose from different filter options: 

  • Blur
  • Hue rotate
  • Saturation
  • Brightness
  • Contrast
  • Grayscale
  • Sepia
  • Invert

Adding filters

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: 

  1. Go to the Style panel > Effects > Filters
  2. Click the plus icon for Filters
  3. Choose Blur from the dropdown
  4. Adjust the blur radius to control the blur levels for your element and its children


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:

  1. Click the plus icon (+) for Filters
  2. Choose Brightness from the dropdown menu
  3. Drag the Amount slider to adjust the Brightness level


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. 

Adjusting states

To adjust the filter on an element while in a different state: 

  1. Choose the Link block (e.g., “Price link block”)
  2. Go to the Selector field in the Style panel
  3. Choose Hover from the dropdown 


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:

  1. Go to the Style panel > Effects > Filters
  2. Click the Grayscale filter you set up previously
  3. Change the Amount to 0% (which brings the color back to the Link blocks)
  4. Click into the Brightness filter
  5. Change the Brightness Amount back to 100%

Hover over the Link blocks to see these updated effects in action. 

Adding transitions

Add a transition to smooth the filter effects between None and Hover states:

  1. Click into the dropdown menu in the Selector field and switch back to None
  2. Go to the Style panel > Effects > Transitions
  3. Click the plus icon and add a Transition
  4. Choose Filter from the Transition Type dropdown 


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! 

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

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?