Theory
Theory
Comments

Smooth Transitions and CSS Filters

Now let’s see how we can apply smooth transitions to filters.

For example, you can use filters to make an image black and white and blurred, remove the filter effect upon hover, and make the visual change itself smoother.

By the way, the filter property has a default value of none. Let’s use it to remove the filter effect when hovering the cursor over the image.

The transition property is discussed in detail in the “Smooth Transitions” section.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Smooth Transitions and CSS Filters</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="compare"> <div class="compare-single combo"> <img src="img/spb-6-full.jpg" alt=""> </div> </div> </body> </html>

CSS

.combo img { } .combo img:hover { }

Goalscompleted

Assign the grayscale(1) filter combination to the image in the .combo block
as well as blur(2px).
Set the filter value to change to none when the cursor is hovered over the image.
Then add a smooth transition for all properties to the image with a duration of 0.6s.

Smooth Transitions and CSS Filters

Comments

Log in

Sign up

Restore access