Dynamic Drive CSS Library- CSS3 Blur Filter Images

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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.

The CSS:

<link href='https://fonts.googleapis.com/css?family=Josefin+Sans:400,700' rel='stylesheet' type='text/css'>

<style>
/*** Default shared CSS ****/

figure.blurfilter{
	margin: 0;
	padding: 0;
	display: inline-block;
	position: relative;
	overflow: hidden; /* hide overflowing elements by default */
}

figure.blurfilter img{
	display: block;
	width: 250px; /* width of image */
	height: auto;
	transition: all 0.4s 0.4s;
}

figure.blurfilter figcaption{
	position: absolute;
	display: block;
	text-align: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
	text-align: center;
	background: white;
	padding: 10px;
	z-index: 100;
	width: 90%;
	height: 90%;
	overflow: hidden;
	top: 5%;
	left: 5%;
  font-family: 'Josefin Sans', sans-serif; /* google font */
	font-size: 16px;
	opacity: 0;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all .4s;
}


figure.blurfilter figcaption h3{
	border-bottom: 1px solid red;
	text-align: left;
	width: 90%;
	margin: 0;
}

figure.blurfilter figcaption p{
	text-align: left;
	margin-top: 10px;
	line-height: 1.5;
}

figure.blurfilter figcaption a{
	text-decoration: none;
}

/* Default 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);
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}

figure.blurfilter:hover figcaption{
	opacity: 1;
	box-shadow: 0 0 5px gray;
	-moz-transition: all .4s .4s;
	-webkit-transition: all .4s .4s;
	transition: all .4s .4s;
}

/* Semi transparent figcation background effect */

figure.semitransparent figcaption{
	background: transparent;
}

figure.semitransparent figcaption:before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: white;
	opacity: .5; /* render background semi transparent */
}

/* Rotate figcation effect */

figure.blurrotate figcaption{
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
}

figure.blurrotate:hover figcaption{
	-webkit-transform: rotate(0);
	transform: rotate(0);
}

/* Slideup figcation effect */

figure.slideup figcaption{
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}

figure.slideup:hover figcaption{
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

/* RotateX figcation effect */

figure.rotatex figcaption{
	-webkit-transform: rotateX(90deg);
	transform: rotateX(90deg);
}

figure.rotatex:hover figcaption{
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
}

/* RotateY figcation effect */

figure.rotatey figcaption{
	-webkit-transform: rotateY(90deg);
	transform: rotateY(90deg);
}

figure.rotatey:hover figcaption{
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
}

</style>

The HTML:

<figure class="blurfilter default">
	<img src="http://www.dynamicdrive.com/dynamicindex4/forest.jpg" alt="An awesome picture">	
	<figcaption>
		<h3>Into the Unknown</h3>
		<p>Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.</p>
	</figcaption>
</figure>

<figure class="blurfilter semitransparent">
	<img src="http://www.dynamicdrive.com/dynamicindex4/forest.jpg" alt="An awesome picture">	
	<figcaption>
		<h3>Into the Unknown</h3>
		<p>Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.</p>
	</figcaption>
</figure>

<figure class="blurfilter blurrotate">
	<img src="http://www.dynamicdrive.com/dynamicindex4/forest.jpg" alt="An awesome picture">	
	<figcaption>
		<h3>Into the Unknown</h3>
		<p>Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.</p>
	</figcaption>
</figure>

<figure class="blurfilter slideup">
	<img src="http://www.dynamicdrive.com/dynamicindex4/forest.jpg" alt="An awesome picture">	
	<figcaption>
		<h3>Into the Unknown</h3>
		<p>Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.</p>
	</figcaption>
</figure>

<figure class="blurfilter rotatex">
	<img src="http://www.dynamicdrive.com/dynamicindex4/forest.jpg" alt="An awesome picture">	
	<figcaption>
		<h3>Into the Unknown</h3>
		<p>Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.</p>
	</figcaption>
</figure>

<figure class="blurfilter rotatey">
	<img src="http://www.dynamicdrive.com/dynamicindex4/forest.jpg" alt="An awesome picture">	
	<figcaption>
		<h3>Into the Unknown</h3>
		<p>Little Red Riding Hood sets off into the woods, unbeknownst what lies ahead.</p>
	</figcaption>
</figure>

Code Info

Rate this code:

Date Posted: 03/31/2016

Revision History: None

Usage Terms: Click here