Kode CSS:

.box_container{
       -moz-box-shadow:0px 10px 20px #000;
       float:center; text-align: center;
       margin-left:80px;
       position:relative;
       width: 500px;
       height:313px;
       overflow:hidden;
       color:white;
}
.images_holder{
       position:absolute;
}
.image_div {
       width:50%;
       position:relative;
       overflow:hidden;
       float:left;
}
.kiri{}
.kanan img{
        margin-left: -100%;
}
Kode Script & jQuery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
$('.box_container').hover(function(){var width =
$(this).outerWidth() / 2;
$(this).find('.kiri').animate({right:width},{queue:false,duration:700});
$(this).find('.kanan').animate({left:width },{queue:false,duration:700});}, function(){
$(this).find('.kiri').animate({ right : 0 },{queue:false,duration:100});
$(this).find('.kanan').animate({ left : 0 },{queue:false,duration:100});});});
</script>
Untuk percobaan, Berikut kode HTML-nya
<div class="box_container">
<div class="images_holder">
<div class="image_div kiri">
<img class="box_image" src="Gambar Anda 1" style="width:  500px;"/></div>
<div class="image_div kanan">
<img class="box_image" src="Gambar Anda 1" style="width:  500px;"/></div>
</div>
<img class="box_image" src="Gambar Anda 2" style="width:  500px;"/></div>
Klik Save.

Berikut Samplenya


*h*****a *i**a N*****a** [Chacha]

13 comments

14 Februari 2012 21.25

mantap emang mesti di]]> kah?rasanya trik css bisa dilakukan dimana aja :D

14 Februari 2012 21.30

wah Mantab sob makassi atas Infonya :D

14 Februari 2012 21.31

@randy oktaransebenernya ga mesti juga di ]]> , memang bisa dilakukan dimana saja....
klo gitu sy ganti aja deh ]]>nya dgn kode css

14 Februari 2012 21.32

@™[./LamonganCheaterZ ]™iya.. sama2 mas

14 Februari 2012 21.41

Keren ya slidebar na om =)) :D boleh neh Jadi Archice kckcck =))

14 Februari 2012 21.47

@Om-Riecosidebar? ga ada sidebarnya nih om..

15 Februari 2012 21.18

Keren,, ada Award nih buat sobat, silahkan diambil

Top 5 Blog

15 Februari 2012 21.51

@Wahyu Ariefok deh..
nnti ku postingkan

15 Februari 2012 23.34

uhh keren juga mas apalagi ceweknya cantik-acantik

16 Februari 2012 00.43

keren keren

16 Februari 2012 01.42

@Ф дфѕдғфдғ Фthx dah klo dah dibilang cntik tmn sy

16 Februari 2012 01.43

@Bimz Saputraapanya yg keren? ceweknya atau postnya?

Posting Komentar

Konversi Kode
[Mulai Senin, 30 Januari 2012] Maaf, Jangan Masukkan Link Pada Komentar