鼠标悬停时缩放带有图像的div

Question

I need to keep the image element (.myImages) within the div (.Holder). On page load, it is sitting bang in the centre of the div. On mouseOver of the image (.myImages), the image zooms to a scale of "2", and the container div animates to become larger in both width and height. Problem is that when the image scales on hover, it comes right out of the top of the div. I want it to expand within the div. Not to go outside it. All answers appreciated.

Code:

 $(document).ready(function(){ $('.myImages').hover(function() { $(this).addClass('transition'); $('.Holder').animate({ width: '600', height: '410' }); }, function() { $(this).removeClass('transition'); $('.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; 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: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

Here's a solution that uses the CSS hover pseudoclass to double the size of the div when it's moused over. Is this close to what you were looking for?

 .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