Implement a Blur or Filter Effect on an Image Using CSS3

It’s very common to have different hover effects on HTML elements, especially on images. The power of CSS3 and modern browsers have made this easy to achieve. CSS3 filters are a powerful property to apply filters to images, just like photoshop filters. The filter CSS property lets you apply graphical effects like blurring, sharpening, or color shifting to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. This short post shows how to apply blur filter and combination of blur and greyscale filter on hover on image using pure CSS.

HTML Markup

Let’s start off by creating the HTML markup. Define two image tags with CSS class blur and blurGrey respectively. These CSS classes are also applied to 2 H1 heading elements. So, in case of mouse hover on H1 tag or image, the filter will be applied.
The image used in this demo is taken from FreeImages.

Blur on Hover

Blur and GreyScale on Hover

CSS

The filter property accepts a built-in filter function or a custom function. The function accepts a value which can be in percentage or a decimal value. To apply blur filter, we need to pass a blur function with some values. In the HTML, one of the image element and H1 element is having blur CSS class. As we want to apply blur effect on hover, therefore :hover selector is used. Inside the hover selector, pass a decimal value or percentage value to blur function. The bigger the number, the more blur would be there.

.blur {
 -webkit-filter: blur(0);
 filter: blur(0);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
 }
 .blur:hover {
 -webkit-filter: blur(3px);
 filter: blur(3px);
 }

The above CSS classes will apply blur effect on images. The CSS3 transition property allows you to change property values smoothly (from one value to another), over a given duration.
We can also pass multiple filter functions separate by space. This is required when multiple effects are needed. For example, to apply both blur and greyscale effects on image, pass both the filters. Like,

.blurGrey {
 -webkit-filter: grayscale(0) blur(0);
 filter: grayscale(0) blur(0);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
 }
 .blurGrey:hover {
 -webkit-filter: grayscale(100%) blur(3px);
 filter: grayscale(100%) blur(3px);
 }

You can check out working demo here. There are other built-in filter functions to create different effects. Below is a list of all such built-in filter functions to choose.

• brightness() – To adjust the brightness.
• contrast() – To adjust the contrast.
• drop-shadow() – Apply a drop shadow effect.
• hue-rotate() – Applies a hue rotation on the image.
• invert() – Invert the samples on the image.
• opacity() – To manipulate the opacity of the image.
• saturate() – Saturates the image.
• sepia() – Apply sepia (redish brown color) filter on the image.
• url() – for applying SVG filters

Conclusion

To sum it up, we’ve just learned how to apply CSS3 filters to create a blur and greyscale effect on the images and H1 heading element. CSS3 filters are like photoshop filters and can be implemented very easily with a few lines of CSS code. We also saw a list of other built-in filter functions to apply different effects. Have fun!