.box_container{
position:relative; /* important */
width:1080px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
height:432px; /* important */
overflow:hidden; /* hide the content that goes out of the div */
/*just styling bellow*/
background-image: url("background.jpg");
color:white;
margin-top:50px;
}
.images_holder{
position:absolute; /* this is important, so the div is positioned on top of the text */
}
.image_div {
    position:relative; /* important so we can work with the left or right indent */
    overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
    width:50%; /* make it 50% of the whole images_holder */
    float:left; /* make then inline */
}
.right img{
    margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
}
.clear{
    clear:both;
}