JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div class='box_container'>
<div class='images_holder'>

<div class='image_div left'>
<img class='box_image' src='http://hosting.gmodules.com/ig/gadgets/file/116495266976257712756/prodigy-of-head.jpg' style='width:300px'/>
</div>
<div class='image_div right'>
<img class='box_image' src='http://hosting.gmodules.com/ig/gadgets/file/116495266976257712756/prodigy-of-head.jpg' style='width:300px'/>
</div>

</div>
Ini address link blog akyuh 
http://beben-koben.blogspot.com/
Kunjungi selalu yaaa ... \m/
</div>

CSS

.box_container {
position: relative;
width: 300px;
height: 225px;
overflow: hidden;
background: #333;
color: #ff0;
text-align: center;
cursor: help;
}
.images_holder {
position: absolute;
}
.image_div {
position: relative;
overflow: hidden;
width: 50%; 
float: left;
}
.right img {
margin-left: -100%;
}
.clear {
clear: both;
}

JavaScript

$(document).ready(function() {

        $('.box_container').hover(function(){
            var width = $(this).outerWidth() / 2;
            $(this).find('.left').animate({ right : width },{queue:false,duration:300});
            $(this).find('.right').animate({ left : width },{queue:false,duration:300});
        }, function(){

            $(this).find('.left').animate({ right : 0 },{queue:false,duration:300});
            $(this).find('.right').animate({ left : 0 },{queue:false,duration:300});

        });

});