Как перемещать изображение в теге div

Question

У меня есть изображение внутри div, которое составляет 100 * 100, я хочу переместить изображение внутри div, как это делают различные компании. например, www.zazzle.com делает это.

Я пробовал приведенный ниже код, но он толкает все остальные divs, divs расширяются. любая идея, как это сделать.

$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

Как 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 
}); 

Второй способ это использовать одного изображения (но мы проигрываем в качестве изображения)

Answer 2

Убедитесь, что вы установите положение изображения в absolute и использовать z-index свойство с более высоким значением, такие как 100 наряду с top и left свойствами. Это заставит изображение появиться над другими элементами и не даст ему нажать другие элементы/div.