使用鼠標懸停的圖像縮放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