이미지 갤러리에서 부드러운 전환으로 이미지를 확대하는 방법은 무엇입니까?

Question

확대/축소 효과가 this one 인 이미지 갤러리를 만들고 싶습니다. 이미지 위로 마우스를 가져 가면 더 큰 버전의 이미지가 추가 마크 업과 함께 표시됩니다.

마크 업 :

<div class="gallery"> 
    <div class="gallery-item"> 
     <img src="image.png" width="150" alt="" /> 
     <div class="gallery-item-full"> 
      <img src="image.png" width="250" alt="" /> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p> 
     </div> 
    </div> 
    . 
    . 
    . 
</div> 

CSS는이 :

.gallery { 
    margin: 100px auto; 
    width: 600px; 
} 

.gallery-item { 
    float: left; 
    position: relative; 
    margin: 0 25px; 
    width: 150px; 
} 

.gallery-item-full { 
    z-index: 999; 
    position: absolute; 
    background: #fff; 
    border: #ccc 1px solid; 
    padding: 5px; 
    top: -50px; 
    left: -50px; 
    opacity: 0; 
} 

.gallery-item:hover .gallery-item-full { 
    opacity: 1; 
} 

이 작동하지만, 나는 previous gallery처럼 원활하게 전환 할 수 있습니다. Javascript/jQuery를 사용할 수 있습니다.

감사합니다.

Answer 1

이 시도 :

그것은 당신의 필요에 맞는 희망 http://jsfiddle.net/FPKAP/12/ (비트 다르지만 나는 최근에 사람을 위해 만든) :)

링크 : Enlarging images when mouseover using Jquery?

코드

$('#zoomimg').mouseenter(function() { 
    $(this).css("cursor","pointer"); 
    $(this).animate({width: "50%", height: "50%"}, 'slow'); 
}); 

$('#zoomimg').mouseleave(function() { 
    $(this).animate({width: "28%"}, 'slow'); 
}); 

코드

$('#zoomimg').hover(function() { 
    $(this).css("cursor", "pointer").animate({ 
     width: "50%", 
     height: "50%" 
    }, 'slow'); 

}, function() { 
    $(this).animate({ 
     width: "28%" 
    }, 'slow'); 

});​