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.
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:
.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
It's a great article to show or generate a blur item effects in any web page. Interesting stuff to learn by web designers. One of the best articles which enhanced my web design skills.
ReplyDelete