title: Scale a div with an image in it on mouseover
body: <p>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. </p>
  
  <p>Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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' });
          });
        });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
       }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class ="Holder"&gt;
      &lt;img class="myImages" onclick="changeImage()" src="a.jpg" width="200" height="180"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>