title: Zoom in on image on hover using transform: scale, still making image bigger from outside
body: <p>How do I make it so the image zooms in on itself with out making the outside larger e.g this is what I want, I have tried to implement this but it doesn't work the same: <a href="http://jsfiddle.net/7vY7v/130/" rel="nofollow">http://jsfiddle.net/7vY7v/130/</a>. What am I doing wrong?</p>
  
  <p>I am using bootstrap, and using the <code>img-responsive</code> class on the imgs aswell.</p>
  
  <p>Heres my demo of what I have done so far: <a href="http://codepen.io/anon/pen/XJzexN" rel="nofollow">http://codepen.io/anon/pen/XJzexN</a></p>
  
  <p>Code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no"&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'&gt;
      &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6 img-wrapper"&gt;
  
                          &lt;img src="https://unsplash.it/800" alt="" class="img-responsive"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="col-md-6 img-wrapper"&gt;
                      &lt;img src="https://unsplash.it/800" alt="" class="img-responsive"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="pushdown"&gt;&lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6 img-wrapper"&gt;
                      &lt;img src="https://unsplash.it/800" alt="" class="img-responsive"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6 img-wrapper"&gt;
                      &lt;img src="https://unsplash.it/800" alt="" class="img-responsive"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="container-fluid"&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="people"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.img-wrapper {
      display: inline-block;
      overflow: hidden;
  }
  
  .img-wrapper img {
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      -ms-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease;
      vertical-align: middle;
  }
  
  .img-wrapper img:hover {
      transform:scale(1.5);
      -ms-transform:scale(1.5); /* IE 9 */
      -moz-transform:scale(1.5); /* Firefox */
      -webkit-transform:scale(1.5); /* Safari and Chrome */
      -o-transform:scale(1.5); /* Opera */
  }
  </code></pre>