Implement a Blur or Filter Effect on an Image Using CSS3

Graphical Effects on CSS

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 Adobe 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 a combination of blur and grey-scale filter on hover for an 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.

For the purposes of this demo, the image used is taken from FreeImages.

<h1 class="blur"> Blur on Hover </h1>
<img class="blur" src="http://images.freeimages.com/images/small-previews/2fe/
butterfly-1390152.jpg" />
<br/>
<h1 class="blurGrey">Blur and GreyScale on Hover</h1>
<img class="blurGrey" src="http://images.freeimages.com/images/small-previews/2fe/
butterfly-1390152.jpg" />

CSS

The filter property accepts a built-in filter function or a custom function. The function accepts a value which can be in a 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 elements and H1 element is having blur CSS class. Since we want to apply blur effect on hover, we will use the :hover selector. 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 separated by spaces. This is required when multiple effects are needed. For example, to apply both blur and greyscale effects on image, pass both the filters. Like so:

.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 a 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 from:

  • 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 similar to 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 filtering!

12 Awesome CSS Frameworks For Your Next Project

CSS (Cascading Style Sheet) is one of the most important tools in any website designers toolkit. In fact, without CSS, website design simply can’t function. Website designing has gone through massive changes over time, and HTML and CSS have come a long way. With the introduction of HTML 5 and CSS 3, website design has […]

Read on...

CSS Tool tips (Infotips) to Support Your Website Visitors

tooltip hover example

What are Tool tips? Tool tips are messages that appear when you hover your cursor over a word, hyperlink, image, icon, or any other element in a graphical user interface (GUI) or website. Also called an “infotip” and sometimes written as “tooltip”, these useful messages appear in a hover box, usually to describe the feature […]

Read on...

Create Responsive Navigation Bars for Desktop and Mobile Websites

Responsive Menus

With minimalist side design still on the rise, it’s sometimes easy for website visitors to get confused. Navigating a website should be easy and intuitive, and is one of the most important elements of a website. Using CSS, you can turn simple HTML menus into dynamic and aesthetically pleasing navigation bars. Responsive Design As the […]

Read on...

Bookmark These! 3 Great Resources for Free Images

free image resources

For any working and aspiring designers, purchasing stock images and assets are costly, especially when working on your own projects. Ideally we have someone else’s money to play with but we all know that’s not always the case. We have gathered 3 great resources for free images which come in handy when in need of textures […]

Read on...

A Solid Tool for Web Dev – Browser-Sync on a Mac

browsersync

What is Browser-Sync Browser-sync is a tool that helps synchronize your browser with any updates you make to the text file immediately after saving. Once you start coding more often, you get acclimated to adding code, refreshing the browser, and saving the files. Refreshing the browser manually can get laborious and just takes more time […]

Read on...

How to Use CSS3’s Width and Height Properties

This tutorial is for very beginners and people who are brand new to CSS, and it covers two of the most useful and common CSS properties: width and height. In CSS, you use the width and height properties to define (as you can probably guess) the width and height of any element. When we say […]

Read on...

How to Use CSS3’s Right and Left Properties

In CSS, the right and left properties can be used to define the space between the right or the left edge of an element and it’s nearest ancestor. If you’re familiar with the margin property, then it might help you to know that in CSS, the right and left properties can be used much the […]

Read on...

How to Use CSS3’s Letter-Spacing Property

Screen Shot 2017-05-17 at 2.21.38 PM

CSS’s letter-spacing property is one that can be used to, you probably guessed it, add (or remove!) spacing between letters. The property is perfect for either making your letters look super close together, or super spread out. If you have any graphic design knowledge, it’s a little bit like kerning your letters — only there’s […]

Read on...

How to Use CSS3’s Padding Property

Screen Shot 2017-05-17 at 1.35.27 PM

In today’s tutorial we’re going to talk about how to use a super-popular CSS property: padding. You can think of the padding property as a way to add space within your elements — not to be confused with margins, which allow you to add space outside of your elements. Just like with margin though, you […]

Read on...