Comment déplacer une image dans une balise div

Question

J'ai une image à l'intérieur d'un div qui est 100 * 100, je veux déplacer l'image à l'intérieur de la div comme le fait de diverses entreprises. par exemple www.zazzle.com fait cela.

J'ai essayé le code ci-dessous, mais il pousse tous les autres divs, les divs sont élargis. une idée de comment faire cela.

$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

Comme 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 
}); 

deuxième façon dont il Utilisons image unique (mais nous perdons dans la qualité de l'image)

Answer 2

Assurez-vous que vous définissez la position d'image à absolute et utiliser la propriété z-index avec une valeur plus élevée, comme 100 ainsi top et left propriétés. Cela fera apparaître l'image sur les autres éléments et l'empêchera de pousser d'autres éléments/divs.