How to move image within a div tag

Question

Hi All ,

I have a image inside a div which is 100*100 , i want to move the image inside the div like various company's does. for example www.zazzle.com does that.

I tried the below code ,but it is pushing all other divs down ,the divs are getting expanded. any idea how to do this.

 $item.animate({height: '+=5', width: '+=5'}, 'fast', function() {
  $item.animate({height: '-=10', width: '-=10'}, 'fast', function() {
    $item.animate({height: '+=5', width: '+=5'}, 'fast', function() {
      //animation finished
    });
  });
}); 

Answer 1

Make sure that you set the image position to absolute and use the z-index property with higher value such as 100 along with top and left properties. This will make image appear over other elements and would keep it from pushing other elements/divs.

Answer 2

Like www.zazzle.com

<div class="example">
   <img class="img-1" src="..." />
   <img class="img-2" src="..." />
</div>

.example{
    position: relative;
    overflow: hidden;
    width: 70px;
    height: 70px;
}
.img-1{
    position:absolute;
    width: 70px;
    height: 70px;
}
.img-2{
    position:absolute;
    width: 140px;
    height: 140px;
    left: -50%;
    top: -50%;
    display: none;
}

$(function(){
    var example = $('.example');
    var img1 = example.find('.img-1');
    var img2 = example.find('.img-2');
    example.hover(
        function(){ 
            img1.animate(
                    {height: '140', width: '140', left: '-50%', top: '-50%'},
                    'fast',
                    function(){
                        $(this).hide();
                        img2.show();
                    }
                );
        },
        function(){
            img2.hide();
            img1.css({height: '70px', width: '70px', left: 0, top: 0}).show();
        }
    );
    //and the next code fore moving image
});

Second way it's use single-image (but we lose in quality of picture)