Make Hover Effect Serelek Jebret with CSS3 & jQuery

Rehat dari informasi yang mencengangkan, kita kembali ke acara tutorial ringan ;)) Tengoklah artikel berikut terlebih dahulu Make Screensaver Pure used CSS3! Menutup keseluruhan bagian blog dengan ramuan kode CSS3 transparan, namun apabila mouse bergerak akan sirna efek transparansi tersebut! Yaaa...seperti itu kira-kira trik yg akan Koben sampaikan.
Effect buka tutup layaknya layar bioskop, ~~menyerelek~~ ke atas saat cursor berada dalam area konten. Jadi efek transparant gue gantikan dengan sebuah gambar. Tetapi dengan pemakaian warna terang/gelap (opacity) sebagai latar belakang oke juga kalian coba :D Aku buat 2 versus, yakni versi jQuery plugin and coded CSS3
Ayo kita bikin hover efek serelek jebret tuing...tuing :))

Serelek Jebret V.jQuery

Plug-in jQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
        $('body').hover(function() {
            $('#filter').animate({height:'0'},500);
        }, function() {
            $('#filter').animate({height:'100%'},500);
        });
});
//]]>
</script>

Script warna merah jangan di pakai jika sudah ada pada template kalian!
Kode CSS

#filter {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVQImWNgQAX/YQwmBgaGf8gy/6CCqMoYGBgYAIIDA/+w1HANAAAAAElFTkSuQmCC);
z-index: ;
}
#filter {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}

Cari tagging penutup </body> dan sisipkan HTML berikut tepat di atasnya<div id="filter"></div>Save, lihat hasil kerja :)
Beres dengan versi script yang lumayan rumit dalam proses, saatnya versi CSS3 bagi para pencinta C S S :P

Serelek Jebret V.CSS3
CSS-3 Coded

#overlay {
left: 0;
top: 0;
position: fixed;
width: 100%;
height: 100%; 
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVQImWNgQAX/YQwmBgaGf8gy/6CCqMoYGBgYAIIDA/+w1HANAAAAAElFTkSuQmCC);
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration:0.7s;
}
#layar:hover #overlay {
height: 0%; 
}

Cara pemakaian, cari tagging <body> tepat di bawahnya masukan ini<div id="layar">Scroll ke paling bawah cari tag </body> sisipkan ini tepat di atasnya.

<div id="overlay"></div>
</div>

Save, look result.
Good luck :)
DEMO

http://jsbin.com/erorur/1

Happy serelek \m/