Item Blur Effect with CSS3 and jQuery

Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of "focus" effect that drwas the attention to the currently hovered item.

ItemBlurEffect

View demo Download source

Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item.

We’ll be using CSS3 transitions and some jQuery to apply the respective classes. Since CSS3 transitions are not supported in order browsers, the demo should be best viewed in Safari or Chrome (here we got the smoothest transitions).

Since we will be using transitions, this effect will only work properly in browsers that support them.

So let’s start!

The Markup

The structure will be a section with some articles in i. Each article item will have a header and a paragraph:

<section class="ib-container" id="ib-container">
	<article>
		<header>
			<h3><a href="#">Some Headline</a></h3>
			<span>Some other text</span>
		</header>
		<p>Some introduction</p>
	</article>
	<article>
		<!-- ... -->
	</article>
	<!-- ... -->
</section>

Let’s look at the style.

The CSS

The main container will be of fixed width and centered:

.ib-container{
	position: relative;
	width: 800px;
	margin: 30px auto;
}

Let’s clear the floats (out articles will be floating) with the help of the :before and :after pseudo elements:

.ib-container:before,
.ib-container:after {
    content:"";
    display:table;
}
.ib-container:after {
    clear:both;
}

Now, let’s style the article items. We’ll make them float and add two box shadows, of which the white one will have a large spread distance. Also, we’ll add the transition for three properties: opacity, transform (we want to scale it) and box-shadow:

.ib-container article{
	width: 140px;
	height: 220px;
	background: #fff;
	cursor: pointer;
	float: left;
	border: 10px solid #fff;
	text-align: left;
	text-transform: none;
	margin: 15px;
	z-index: 1;
	box-shadow: 
		0px 0px 0px 10px rgba(255,255,255,1), 
		1px 1px 3px 10px rgba(0,0,0,0.2);
	transition: 
		opacity 0.4s linear, 
		transform 0.4s ease-in-out, 
		box-shadow 0.4s ease-in-out;
}

For Webkit browsers we’ll also add

-webkit-backface-visibility: hidden

to avoid a short flicker. (You can remove this if you prefer to have a crisp looking text, though).

Let’s style the text elements and create some nice typography. The color and the text-shadow of each element will be matching:

.ib-container h3 a{
	font-size: 16px;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
	opacity: 0.8;
}
.ib-container article header span{
	font-size: 10px;
	font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
	padding: 10px 0;
	display: block;
	color: rgba(255, 210, 82, 1);
	text-shadow: 0px 0px 0px rgba(255, 210, 82, 1);
	text-transform: uppercase;
	opacity: 0.8;
}
.ib-container article p{
	font-family: Verdana, sans-serif;
	font-size: 10px;
	line-height: 13px;
	color: rgba(51, 51, 51, 1);
	text-shadow: 0px 0px 0px rgba(51, 51, 51, 1);
	opacity: 0.8;
}

And now we’ll add the transition to all three. Again, we’ll have three properties: opacity, text-shadow and color:

.ib-container h3 a,
.ib-container article header span,
.ib-container article p{
	transition: 
		opacity 0.2s linear, 
		text-shadow 0.5s ease-in-out, 
		color 0.5s ease-in-out;
}

The blur class will be applied to all the siblings of the currently hovered item. We want to scale them down a bit and add a big white box shadow, to make the box look blurry. We’ll also decrease the opacity a bit:

.ib-container article.blur{
	box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
	transform: scale(0.9);
	opacity: 0.7;
}

In order to make the text elements look blurry, we’ll make the color transparent by setting the opacity of the rgba value to 0, and we’ll enlarge the text-shadow blur distance:

.ib-container article.blur h3 a{
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
	color: rgba(0, 0, 0, 0);
	opacity: 0.5;
}
.ib-container article.blur header span{
	text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9);
	color: rgba(255, 210, 82, 0);
	opacity: 0.5;
}
.ib-container article.blur  p{
	text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
	color: rgba(51, 51, 51, 0);
	opacity: 0.5;
}

The currently hovered item will be slightly enlarged and adjust the box shadow. We’ll also set a high z.index to guarantee that the item will always be on top of the other ones when we hover over it:

.ib-container article.active{
	transform: scale(1.05);
	box-shadow: 
		0px 0px 0px 10px rgba(255,255,255,1), 
		1px 11px 15px 10px rgba(0,0,0,0.4);
	z-index: 100;	
	opacity: 1;
}

Last, but not least, we’ll set the opacity of the text elements to 1:

.ib-container article.active h3 a,
.ib-container article.active header span,
.ib-container article.active p{
	opacity; 1;
}

And that’s all the style! Let’s have a look at the JavaScript.

The JavaScript

So, when we hover over an article, we will give all the other articles the class blur and the current one will receive the class active:

var $container	= $('#ib-container'),
	$articles	= $container.children('article'),
	timeout;

$articles.on( 'mouseenter', function( event ) {
		
	var $article	= $(this);
	clearTimeout( timeout );
	timeout = setTimeout( function() {
		
		if( $article.hasClass('active') ) return false;
		
		$articles.not($article).removeClass('active').addClass('blur');
		
		$article.removeClass('blur').addClass('active');
		
	}, 75 );
	
});

$container.on( 'mouseleave', function( event ) {
	
	clearTimeout( timeout );
	$articles.removeClass('active blur');
	
});

And that’s all! I hope you enjoyed this little tutorial and find it useful!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 34

Comments are closed.
  1. 1

    The effect is awesome, but why didn’t you use :hover alone on the items to be activated and the rest of them be blurred by using the nth-of-type css3 selector

  2. 2

    @ERWIN HEISER
    Thank you for your answer, I was confused about what Modernizr could get, I thought it was capable to achieve some modern CSS tecniques through JS.

  3. 3

    nice, very nice)

    and for images:
    .ib-container article.blur img{
    filter:blur(Add=1,Direction=1,Strength=7); /* IE6-8 */
    -webkit-filter: blur(7px); /* chrome, safari */
    /* -moz-filter? */
    /* -o-filter? */
    }
    :)

  4. 4

    Bummer that it doesn’t work in IE. It’s still the most popular browser coming to our site. But this looks awesome! Maybe we can use it somewhere else!

  5. 6

    Is there any way I can use an iframe (such as a youtube video) and have the opacity of the iframe change like the boxes? I can’t seem to find any code that will allow me to adjust the opacity of an iframe.

  6. 7

    great!! … what about usability? i can not read(see) other options if i have hovered any element. Probably reducing blur level may help.

  7. 8

    Nice code, Mary Lou, thanks for sharing. I wonder if we could achieve the same (or equivalent) result with just CSS3. On Chrome the overall effect is smooth and enjoyable. On Firefox 9 it works but isn’t quite smooth enough. Perhaps it’s possible to simplify it? I will play with it a bit, it sounds like a nice challenge. And thanks again! Excellent inspiration. Ciao!

  8. 11

    This is an awesome tutorial Mary. Can i use the concept on a project i am working on for an aviation website?

  9. 13

    hello, thanks for very nice effect, just wondering if its possible to tweak the script so, that the hovered box will scale from its current position into exact size of parent element, for example 800×600 parent div over the other boxes instead of bluring them.

Comments are closed.