Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 

CSS Library: Image CSS: CSS3 demos: Here

CSS3 Blur Filter Images

Author: Dynamic Drive

CSS3's "filter" property lets you apply common filter effects to an element, such as blur, grayscale, brightness, contrast and hu. In this demo we demonstrate using one of the more dramatic effects, blur, on an image inside the FIGURE element. When the mouse rolls over the FIGURE, we blur the containing image while using CSS3 transform to zoom in slightly to heighten the effect:

figure.blurfilter:hover img{
	-webkit-filter: blur(30px); /* blur filter */
	filter: blur(30px); /* blur filter */
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
	transition: all 0.4s;
}

Following this we proceed to animate the FIGCAPTION element to show some descriptive text over the image.

The "filter" property is supported in IE Edge and all other modern browsers.

Demo:

An awesome picture

Into the Unknown

Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.

An awesome picture

Into the Unknown

Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.

An awesome picture

Into the Unknown

Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.

An awesome picture

Into the Unknown

Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.

An awesome picture

Into the Unknown

Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.

An awesome picture

Into the Unknown

Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 03/31/2016

Revision History: None

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.


Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.