Item Blur Effects Using Css And Jquery

This tutorial is all about advancement of css and jquery combinaion.Blur effects can be easily embedded into webpages. It looks awesome. You just have to embedd your css and jquery file and with Html code you can perform this.Jquery helps in smoothness of the whole operation. Here is a download link you can refer to that link. Css defines the looks of the page and blurness is defined in the jquery part. It depends on user how much blurness is required.
Blur class is added into jquery and this single class is behind this superb tutorial.

Download From Here

Screen Shot:

Jquery Code:

$(function() {
    
    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('blur').addClass('active') )
         .removeClass('active')
         .addClass('blur');
      
     }, 65 );
     
    });
    
    $container.on( 'mouseleave', function( event ) {
     
     clearTimeout( timeout );
     $articles.removeClass('active blur');
     
    });
   
   });

CSS Code:

This code contains the bluring effects of items and their opacity. Have a look at it.

.ib-container article.blur{
 box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
 -webkit-transform: scale(0.9);
 -moz-transform: scale(0.9);
 -o-transform: scale(0.9);
 -ms-transform: scale(0.9);
 transform: scale(0.9);
 opacity: 0.7;
}
.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;
}

/* Hover Style for single item: scale up */
.ib-container article.active{
 -webkit-transform: scale(1.05);
 -moz-transform: scale(1.05);
 -o-transform: scale(1.05);
 -ms-transform: scale(1.05);
 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;
}

Hope you will like this post.
source codrops