Apply Image Filter Effects With CSS

Stephanie Eckles: [0:00] Here we have an image of Ada Lovelace. We're going to apply some filter effects. They used to only be possible by taking an image into a graphics tool. The first one we're going to apply is grayscale, which then takes a percentage, and a percentage is used to remove that percent of the image's color. We'll give it a value of 40% and on save, we see 40 percent of the color is removed.

[0:25] We're also going to use the blur function, and we'll set this to a value of 2px. I found the 2px is enough to clearly be a blurred effect while still allowing the image to retain some recognizable features.

[0:39] Then on hover of the image, we can set the filters to not remove the effects and hop back up into our image and add a transition to smooth out that effect, and we'll specifically apply it to the filter. Now that hover effect is a bit smoother.

[0:54] One more effect we'd like to add requires the use of box-shadow. Images cannot have an inset box-shadow. In the markup for our image, we've surrounded it with a span tag. We're going to set our span position to relative so that we can absolutely position an :after element such that it will completely cover the image.

[1:13] Then on the :after element, we can use the box-shadow property to apply an inset box-shadow. We don't want it to have an x or y offset. We just want to use the blur. You can experiment with what value you like best. I've chosen 5rem for our example.

[1:30] We're going to apply an RGBA value that computes to a Navy Blue. On save, you can see that's been applied. It's created a bit of what photographers call a vignette effect, where the box-shadow is darkening the edges of the image and leaving the middle clear.

[1:46] Instead of removing filters on hover of the image, let's update this rule to detect when the span is being hovered, and then remove it from the image. Similarly, when the span is being hovered, we will reduce the box-shadow.

[1:59] Unfortunately, we can't affect individual properties of the box-shadow. We'll have to copy our rule and reduce the value that we want to remove, which is the blur, down to . Before we check out our effect, let's remember to add a transition and apply that to just the box-shadow. On save, we can see that on hover, the filters are removed, and the box-shadow shrinks back to the edges.

[2:25] In this lesson, we learned how to use the filter property and applied a grayscale and blur effect to an image. We also learned how to make use of an additional pseudo-element that's placed on the image parent in order to apply a box-shadow for a vignette effect on our image. Then, we chose to remove those effects via :hover, and use the transition property for a smooth transition between effects.