title: CSS transform: scale overlaps padding of container div
body: <p>I have a grid of images with padding to the right and to the top. I added animation to scale the images a bit when hovering them with the mouse. Issue is that when the image scales it overlaps the padding mention above. I managed to solve it by using margin instead of padding but this html is from my wordpress theme and using margins instead of padding causes other issues I can't deal with.</p>
  
  <p>Is there a way to achieve such behaviour with padding?</p>
  
  <p>Thanks!
  Example:
  <a href="http://jsfiddle.net/thimim/h6pvusau/" rel="nofollow">http://jsfiddle.net/thimim/h6pvusau/</a></p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="fs_grid_gallery"&gt;
  
  &lt;div class="grid-gallery-item"&gt;
      &lt;img src="http://propixelpanama.com/wp-content/uploads/2015/09/azrieli-1-540x375.jpg" alt="" class="fw_featured_image"&gt;
  &lt;/div&gt;
  
  &lt;div class="grid-gallery-item"&gt;
      &lt;img src="http://propixelpanama.com/wp-content/uploads/2015/09/azrieli-1-540x375.jpg" alt="" class="fw_featured_image"&gt;
  &lt;/div&gt;
  
  &lt;div class="grid-gallery-item"&gt;
      &lt;img src="http://propixelpanama.com/wp-content/uploads/2015/09/azrieli-1-540x375.jpg" alt="" class="fw_featured_image"&gt;
  &lt;/div&gt;
  
  &lt;div class="grid-gallery-item"&gt;
      &lt;img src="http://propixelpanama.com/wp-content/uploads/2015/09/azrieli-1-540x375.jpg" alt="" class="fw_featured_image"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.grid-gallery-item
  {
      width: 25%;
      padding-right:5px; 
      padding-top:5px;
      position: relative;
      float: left;
  }
  
  img
  {
      display: block;
      width: 100%;
      height: auto;
  }
  .fs_grid_gallery
  {
      padding-bottom:5px; 
      padding-left:5px;
      width: 100%;
  }
  
  
  div.grid-gallery-item, div.grid-gallery-item a, .gallery_item_wrapper
  {
      position:relative;
      overflow: hidden;
  }
  
  img.fw_featured_image
  {
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
      overflow: hidden;
      box-sizing: border-box;
      max-width: 100%;
  }
  
  div.grid-gallery-item:hover .fw_featured_image
  {   
      -webkit-transform: scale(1.05);
      -moz-transform: scale(1.05);
      -o-transform: scale(1.05);
      -ms-transform: scale(1.05);
      transform: scale(1.05);     
  }
  </code></pre>