title: How to make an image grow inside of its container to create a zoom effect?
body: <p><a href="http://darrenbachan.com/" rel="noreferrer">http://darrenbachan.com/</a></p>
  
  <p>I'm trying to make it where when I hover over a project the img zooms in. I tried using this:</p>
  
  <pre><code>.grow { transition: all .2s ease-in-out; }
  .grow:hover { transform: scale(1.1); }
  </code></pre>
  
  <p>But when I put it on  it makes the entire container to grow. I even tried putting the class grow on the span that holds the image but it does the same thing.</p>
  
  <p>I then tried:</p>
  
  <pre><code>.grow { 
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
      box-sizing: border-box;
      -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
      -o-transition: all 2s ease;
      -ms-transition: all 2s ease;
      transition: all 2s ease;
  }
  .grow:hover { 
      /*transform: scale(1.1);*/ 
      background-size: 150%;
      overflow: hidden;
  }
  </code></pre>
  
  <p>But this doesn't work either. It scales the background from the top left corner and has no easing.</p>
  
  <p>How can I modify the code to achieve the zoom effect I'm looking for?</p>