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.

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!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 34

Comments are closed.
  1. Hi Rakesh, CSS3 transitions don’t work in IE ๐Ÿ™ Probably just in the next version… text shadows don’t work in IE, neither. Not even in IE9…

  2. Nice technique. I noticed that now you are focusing on CSS3 from your last few tutorials.Thanks for making good concepts tutorials in css3 along jquery.It helps me to learn more and more about latest web trends.

  3. Let’s file this under “why didn’t I think of this earlier”.
    Awesome trick, Mary, once again ๐Ÿ˜‰

  4. It’s a lovely idea in theory, but in practice in Chrome the text of the hovered element is blurred slightly.

    • Hi Michael, thank you. Yes, it’s because of the -webkit-backface-visibility: hidden property. You can remove it and see if you like the effect more, it will be more sharp, but while sharpening up there is a slight “jump”. That’s why I actually used it in the first place, but you are right, I guess a sharper text is much more important ๐Ÿ™‚
      Cheers and thanks, ML

  5. Please, does anyone know if this tecnique works in IE and old browsers using the library Modernizr?

  6. Ah that makes sense! I guess anyone that uses this can just decide either way. Awesome effect though, your work is brilliant and inspiring, keep it up! ๐Ÿ™‚

  7. You keep this site updated to much for me to try out all of these cool techniques.

    This is stellar as always

  8. @TAOTE
    Modernizr detects whether support for a certain property is there, but doesn’t enable support if the browser in question doesn’t support it. Its main purpose is to help you decide which fallback styles and or polyfill scripts you want to use when a certain feature (e.g. multiple backgrounds in css) is not supported.

  9. 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

  10. @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.

  11. 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? */
    }
    ๐Ÿ™‚

  12. 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!

  13. 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.

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

  15. 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!

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

  17. 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.