How to create an interactive featured post widget using CSS3 (filter) ?

Featured post widget creates a few links in your blog that readers are convinced to read.However,the attractiveness towards these widgets can increase the views on your posts.In this post I'm going to use a CSS3 property of filter that can amazingly add a few interactive effects to your objects and will describe the property of filter in detail.So lets begin with a a demo :

See the Pen interactive featured post widget using CSS3 by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

The only reason to introduce this featured post widget is to introduce one of the useful property of CSS3 that is filter.

filter

filter can have a large number of uses specially in customization and animation in different aspects.Black and white and blurriness is possible through jQuery plugins but the most better way to do it is to use this property.

The functions that can be done by filter are:
url()
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()

The browsers that are supported are

Chrome	Firefox	IE 9	Safari iOS	Android	Opera	Opera Mini
Yes -webkit-	No	No	Yes -webkit-	Yes -webkit-	Yes -webkit-	No

Internet Explorer 9 uses a non-standard filter,read this for more info.

Examples

This is an image on which the filter is going to be applied.

blur()

brightness()

contrast()

drop-shadow()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

The url() contain svg source.

Use several at once: To use filter multiple time on a single element ad like this one

filter: blur(5px) opacity(0.5);

There are several properties like opacity and box-shadow that have separate properties in CSS3 but filter also have values for that.