slide picnpic

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>