HTML

   <div class='box_container'>
        <img class='box_image' src='img.jpg' style='width:300px'/>
        Just some dummy text.
   </div>
   <div class='clear'></div>

The HTML part is pretty simple as you can see, we got a container div (some of you may call it a wrapping div) in which we have an image and some text.

That is how it looks now, it’s not what we want it to look like at all, isn’t it. So the next part is CSS.

CSS

    .box_container{
    position:relative; /* important */
    width:300px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
    height:220px; /* important if you use slidedown/slideup effects (check the demo). */
    overflow:hidden; /* hide the content that goes beyond the div limits */
    /*just styling bellow*/
    background: black;
    color:white;
    }
    .box_image{
    position:absolute; /* important - to get the image position on top of the text */
    }

I know it looks like it’s just the image, that’s because the image is on top of the text, and that’s where we want it to be. Next step… Jquery.

JQuery

  $(document).ready(function() {

        /*when the user hovers over the DIV that contains the image and the text... */
        $('.box_container').hover(function(){

            /*... we get the DIV's width ... '*/
            var width = $(this).outerWidth();

            /*... and change the position of the image to that width with an animation effect... */
            $(this).find('.box_image').animate({ left : width },{queue:false,duration:300});
            /*queue:false means that if hovered again it won't wait for the previous animation to finish
            duration:300 means that the animation effect will take 0.3 seconds to finish '*/

        }, function(){

            /*... and when he hovers out we get the image back to it's starting position using the same function... '*/
            $(this).find('.box_image').animate({ left : '0px' },{queue:false,duration:300});

        });

  });

And we’re done