Item Blur Effect On Hover In jQuery & CSS3

ITEM BLUR EFFECT
File Size:93.27 KB
Views Total:220
Last Update:April 15, 2018
Publish Date:April 15, 2018
Official Website:Go to website
License:MIT

we can create a simple blur effect on hover in single items.The single item in focus will scale up. Today we are showing you how to create a blur effect on hover text-based items. it can work of set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up.one item highlight on hover and others all items are look like disable.

How to us :

  1. add Html l language :
    <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>

2. Add jQuery script :

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');
	
});

3. Add Css style for blur effect :

<link rel="stylesheet" type="text/css" href="css/style.css" />

Done