Create a Basic Responsive Grid System With CSS Grid

Apply Aspect Ratio Sizing to Images with CSS object-fit

Create Basic Effects with CSS box-shadow

Create an Automatically Responsive Flexbox Gallery

Create Viewport Responsive Layout Spacing Using CSS Clamp

Access Theme Color Values With Sass

Apply Image Filter Effects With CSS

Define and use CSS Custom Properties

Create an Accessible Group of Form Fields

Learn the Fundamentals of CSS and Sass to Create Modern and Responsive Layouts 

Apply a grayscale and blurred effect on an image without the use of graphics software by using the CSS `filter` property. Additionally, use an inset `box-shadow` to create a vignette effect as used by photographers. Learn how to remove each effect by using `transition` to ease out the effects on a `:hover` interaction.

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.

Course

Learn the Fundamentals of CSS and Sass to Create Modern and Responsive Layouts

Apply Image Filter Effects With CSS

Share this video with your friends