title: Zooming an image on hover and not exceeding parent div borders
body: <p>I'm trying to create a zoom effect using css3/html but for some reason I can't get the image to stay within the borders of the parent div. </p>
  
  <p>I've tried nesting the image inside another div, and also just leaving it as just an image inside the parent div. It doesn't want to work for me.</p>
  
  <p>Here's the current HTML </p>
  
  <pre><code>&lt;div id="forumGroup" style="border: 1px solid #000000; box-shadow: 3px 3px  5px #999; border-radius: 10px; margin: 5px; display: block; width: 250px; height: 250px; padding: 10px; float: left; position: relative; text-align:  center; display: block;"&gt;
  &lt;div class="mainGroupImage"&gt;
  &lt;img src="http://placehold.it/250x250" style="width: 250px; height: 250px;" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.mainGroupImage{
  max-width: 100%;
  -webkit-transition: all 1s ease; /* Safari and Chrome */
  -moz-transition: all 1s ease; /* Firefox */
  -ms-transition: all 1s ease; /* IE 9 */
  -o-transition: all 1s ease; /* Opera */
  transition: all 1s ease;
  }
  
  .mainGroupImage:hover{
  -webkit-transform:scale(1.25); /* Safari and Chrome */
  -moz-transform:scale(1.25); /* Firefox */
  -ms-transform:scale(1.25); /* IE 9 */
  -o-transform:scale(1.25); /* Opera */
   transform:scale(1.25);
  }
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/ojc5aaaf/" rel="nofollow">http://jsfiddle.net/ojc5aaaf/</a></p>