{"id":3076,"date":"2017-08-10T18:20:19","date_gmt":"2017-08-10T23:20:19","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2443"},"modified":"2017-08-10T18:20:19","modified_gmt":"2017-08-10T23:20:19","slug":"implement-a-blur-or-filter-effect-on-an-image-using-css3","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/implement-a-blur-or-filter-effect-on-an-image-using-css3\/","title":{"rendered":"Implement a Blur or Filter Effect on an Image Using CSS3"},"content":{"rendered":"

It\u2019s 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.<\/p>\n

HTML Markup<\/h2>\n

Let\u2019s 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.
\nThe image used in this demo is taken from FreeImages<\/a>.<\/p>\n

Blur on Hover<\/h3>\n

\"\"<\/p>\n

Blur and GreyScale on Hover<\/h3>\n

\"\"<\/p>\n

CSS<\/h2>\n

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.<\/p>\n

.blur {\n -webkit-filter: blur(0);\n filter: blur(0);\n -webkit-transition: .3s ease-in-out;\n transition: .3s ease-in-out;\n }\n .blur:hover {\n -webkit-filter: blur(3px);\n filter: blur(3px);\n }<\/pre>\n
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.
\nWe 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,<\/p>\n
.blurGrey {\n -webkit-filter: grayscale(0) blur(0);\n filter: grayscale(0) blur(0);\n -webkit-transition: .3s ease-in-out;\n transition: .3s ease-in-out;\n }\n .blurGrey:hover {\n -webkit-filter: grayscale(100%) blur(3px);\n filter: grayscale(100%) blur(3px);\n }<\/pre>\n
You can check out working demo here<\/a>. There are other built-in filter functions to create different effects. Below is a list of all such built-in filter functions to choose.<\/p>\n
\u2022 brightness() \u2013 To adjust the brightness.
\n\u2022 contrast() \u2013 To adjust the contrast.
\n\u2022 drop-shadow() \u2013 Apply a drop shadow effect.
\n\u2022 hue-rotate() \u2013 Applies a hue rotation on the image.
\n\u2022 invert() \u2013 Invert the samples on the image.
\n\u2022 opacity() \u2013 To manipulate the opacity of the image.
\n\u2022 saturate() \u2013 Saturates the image.
\n\u2022 sepia() \u2013 Apply sepia (redish brown color) filter on the image.
\n\u2022 url() – for applying SVG filters<\/p>\n
Conclusion<\/h2>\n
To sum it up, we\u2019ve 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!<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
It\u2019s 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 […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168,174,194],"tags":[49,263,372],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3076"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3076"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3076\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}