Item Blur Effect With CSS3 and Jquery

Setelah Saya pikir pikir ini cocok untuk Saya Postingin karena alasan yang tidak bisa saya jelaskan wkwkwk, ini  saya dapatkan di suatu website yang tutorialnya keren keren, ye mungkin kalian sudah tau ya, langsung lihat screenshot dibawah ya
  
                             

biar lebih jelas ni saya kasi demo


Kerangka

<section class="ib-container" id="ib-container">
<article>
<header>
<h3><a target="_blank" href="http://cyber-jm.blogspot.com/2012/03/template-cyber-jm-v2.html">Template Cyber-JM V2</a></h3>
<span>01 April 2012</span>
</header>
<p>Pada hari minggu tepatnya tanggal 1 April 2012 saya mau bagi template Cyber-JM yang kedua, tadinya mau bagi template pertama ane, karena backup terlalu banyak jadi pusing,</p>
</article>
<article>
<header>
<h3><a target="_blank" href="http://cyber-jm.blogspot.com/2012/03/tooltip-keren-linkgambar-akronim.html">Tooltip keren (Link,Gambar, Akronim)</a></h3>
<span>30 Maret 2012</span>
</header>
<p>oke jadi ke inget sama cyber jm yang dulu yang pake tooltip ke semua(link,title,gambar) pas udah inget langsung coba lagi di template lain ternyata bisa, lansung di share, lihat screenshot berikut.. preet</p>
</article>
<article>
<header>
<h3><a target="_blank" href="http://cyber-jm.blogspot.com/2012/03/on-mouse-over-alert.html">On Mouse over Alert</a></h3>
<span>29 Maret 2012</span>
</header>
<p>On mouseover alert berfungsi untuk menampilkan pesan pada saat pengunjung blog menggerakkan cursor di atas gambar. Bentuk KODE yang digunakan adalah sebuah javascript yang sangat sederhana</p>
</article>
<article>
<header>
<h3><a target="_blank" href="http://cyber-jm.blogspot.com/2012/03/text-shadow-dengan-efek-hover.html">Text-Shadow Dengan Efek Hover</a></h3>
<span>28 Maret 2012</span>
</header>
<p>Text-shadow dengan efek hoverLangsung aja Sekarang mari kita mulai pembahasan CSS3 Text-shadow dengan efek hover silahkan arahkan kursor ke kalimat di bawah:</p>
</article>
<article>
<header>
<h3><a target="_blank" href="http://cyber-jm.blogspot.com/2012/03/membuat-menu-melayang-dengan-efek-fade.html">Membuat Menu Melayang Dengan Efek Fade Out</a></h3>
<span>27 Maret 2012</span>
</header>
<p>Malam sobat, ok artikel kali ini berjudul  Membuat Menu Melayang Dengan Efek Fade Out  menu ini mungkin belum banyak di share blog-blog mudah mudahan Cyber-JM yang pertama. Amin hehe</p>
</article>
<article>
<header>
<h3><a target="_blank" href="http://cyber-jm.blogspot.com/2012/03/modifikasi-tampilan-blogroll.html">Modifikasi tampilan blogroll</a></h3>
<span>26 Maret 2012</span>
</header>
<p>Sudah beberapa hari ini saya nggak posting, lagi sibuk dengan dunia nyata, oke dari pada mikirin ntu lebih baik modif tu tampilan blogroll sobat, hehehe.ni saya kasi blogroll ini mengikuti u</p>
</article>
<article>
<header>
<h3><a target="_blank" href="http://cyber-jm.blogspot.com/2012/03/custom-font-dengan-google-web-font-dan.html">Custom Font Dengan Google Web Font Dan Penggunaanya</a></h3>
<span>24 Maret 2012</span>
</header>
<p>sebenarnya ini udah lama tapi karena banyak request ya share dah.. langsung aja tampa memperpanjang waktu langsung aja ikuti tutor di bawah ini oke</p>
</article>
<article>
<header>
<h3><a target="_blank" href="http://cyber-jm.blogspot.com/2012/03/javascript-popup-window-dengan-animasi.html">Javascript Popup Window Dengan Animasi</a></h3>
<span>22 Maret 2012</span>
</header>
<p>udah berapa hari ya saya gak posting.. hehe soalnya saya gak ada bahan dan sekarang baru dapat oke udah pernah kan klik button yang nantinya keluar popup</p>
</article>
</section>


CSS

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* Fonts */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* General Demo Style */
body{
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
background: #ddd url(../images/noisy_blue.jpg) repeat top left;
font-weight: 400;
font-size: 15px;
color: #333;
}
a{
color: #333;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
text-align: center;
}
.clr{
clear: both;
}
.container > header{
padding: 30px 30px 10px 30px;
margin: 0px 20px 10px 20px;
position: relative;
display: block;
}
.container > header:after{
content: '';
height: 1px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
background: rgba(0,0,0,0.1);
box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.7);
}
h1{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
text-transform: uppercase;
font-size: 50px;
line-height: 50px;
position: relative;
font-weight: 400;
color: #111;
text-shadow: 0px 0px 1px rgba(0,0,0,0.7);
    padding: 0px 0px 5px 0px;
margin: 0px 20px;
    text-align: center;
}
h1 span{
color: #ffd252;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
h2{
font-size: 16px;
font-style: italic;
padding: 0px 0px 15px 0px;
}
/* Header Style */
.header{
font-family:'Arial Narrow', Arial, sans-serif;
line-height: 24px;
font-size: 11px;
background: #000;
opacity: 0.9;
text-transform: uppercase;
z-index: 9999;
position: relative;
-moz-box-shadow: 1px 0px 2px #000;
-webkit-box-shadow: 1px 0px 2px #000;
box-shadow: 1px 0px 2px #000;
}
.header a{
padding: 0px 10px;
letter-spacing: 1px;
color: #ddd;
display: block;
float: left;
}
.header a:hover{
color: #fff;
}
.header span.right{
float: right;
}
.header span.right a{
float: none;
display: inline;
}
p.demos{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align:center;
display: block;
line-height: 30px;
padding: 20px 0px;
}
p.demos a{
    display: inline-block;
width: 60px;
height: 60px;
background: #222;
margin: 0px 4px;
color: #fff;
line-height: 60px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 50%;
font-size: 16px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
}
p.demos a:hover{
opacity: 0.7;
}
p.demos a.current-demo,
p.demos a.current-demo:hover{
background: #ffd252;
}
.ib-container{
position: relative;
width: 800px;
margin: 30px auto;
display: block;
}
.ib-container:before,
.ib-container:after {
    content:"";
    display:table;
}
.ib-container:after {
    clear:both;
}
.ib-container article{
display: block;
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;
-webkit-backface-visibility: hidden;
box-shadow:
0px 0px 0px 10px rgba(255,255,255,1),
1px 1px 3px 10px rgba(0,0,0,0.2);
-webkit-transition:
opacity 0.4s linear,
-webkit-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-moz-transition:
opacity 0.4s linear,
-moz-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-o-transition:
opacity 0.4s linear,
-o-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-ms-transition:
opacity 0.4s linear,
-ms-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
transition:
opacity 0.4s linear,
transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
}
.ib-container h3 a{
font-size: 16px;
font-weight: 400;
color: #000;
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: #FFD252;
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: #333;
color: rgba(51, 51, 51, 1);
text-shadow: 0px 0px 0px rgba(51, 51, 51, 1);
opacity: 0.8;
}
.ib-container h3 a,
.ib-container article header span,
.ib-container article p{
-webkit-transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
-moz-transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
-o-transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
-ms-transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
}
/* Hover Style for all the items: blur, scale down*/
.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;
}
.ib-container article.active h3 a,
.ib-container article.active header span,
.ib-container article.active p{
opacity; 1;
}
Javascript
<script type="text/javascript">
$(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');
});
});
</script>


Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Unknown, Published at 10.34 and have 8 komentar

8 komentar: