使用鼠标悬停的图像缩放div

Question

我需要将图像元素（.myImages）保留在div（.Holder）内。在页面加载时，它正在div的中心位置晃动。在图像（.myImages）的mouseOver上，图像将缩放为“2”的比例，并且容器div的动画宽度和高度都会变大。问题是，当图像在悬停时缩放时，它会从div顶部移出。我希望它在div内扩展。不要走出去。所有的答案赞赏。

代码：

$(document).ready(function(){ 
 
     $('.myImages').hover(function() { 
 
      $(this).addClass('transition'); 
 
     $('.Holder').animate({ width: '600', height: '410' }); 
 
    \t 
 
     }, function() { 
 
      $(this).removeClass('transition'); 
 
    \t \t $('.Holder').animate({ width: '300', height: '250' }); 
 
     }); 
 
     });

.myImages { 
 
     -webkit-transition: all .2s ease-in-out; 
 
     -moz-transition: all .2s ease-in-out; 
 
     -o-transition: all .2s ease-in-out; 
 
     -ms-transition: all .2s ease-in-out; 
 
    \t z-index:-1; 
 
    \t margin:20px; 
 
    } 
 
     
 
    .transition { 
 
     -webkit-transform: scale(2); 
 
     -moz-transform: scale(2); 
 
     -o-transform: scale(2); 
 
     transform: scale(2); 
 
    } 
 
    
 
    .Holder{position: relative; 
 
     background-color:white; 
 
     text-align: center; 
 
     width: 300px; 
 
     height: 250px; 
 
     border: 2px solid; 
 
     margin:200px; 
 
     padding:0; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class ="Holder"> 
 
    <img class="myImages" onclick="changeImage()" src="a.jpg" width="200" height="180"> 
 
</div>

Answer 1

下面是一个使用了CSS hover pseudoclass时，它的鼠标滑过到div的规模扩大一倍的解决方案。这与您正在寻找的东西接近吗？

.myImages { 
 
    z-index: -1; 
 
    margin: 20px; 
 
} 
 
.transition { 
 
    -webkit-transform: scale(2); 
 
    -moz-transform: scale(2); 
 
    -o-transform: scale(2); 
 
    transform: scale(2); 
 
} 
 
.Holder { 
 
    position: relative; 
 
    background-color: white; 
 
    text-align: center; 
 
    width: 300px; 
 
    height: 250px; 
 
    border: 2px solid; 
 
    margin: 20px; 
 
    padding: 0; 
 
    -webkit-transition: all .2s ease-in-out; 
 
    -moz-transition: all .2s ease-in-out; 
 
    -o-transition: all .2s ease-in-out; 
 
    -ms-transition: all .2s ease-in-out; 
 
} 
 
.Holder:hover { 
 
    transform-origin: top left; 
 
    transform: scale(2.0); 
 
}

<div class ="Holder"> 
 
    <img class="myImages" src="http://i.imgur.com/8mro6SN.jpg?1" width="200" height="180"> 
 
</div>

CodePen：http://codepen.io/maxlaumeister/pen/LVayOO