CSS转换：scale重叠容器div的填充

Question

我有一个图像网格，右边和顶部有填充。我添加动画来在用鼠标悬停图像时稍微缩放图像。问题是，当图像缩放时，它与上面提到的填充重叠。我设法通过使用margin而不是padding来解决它，但是这个html来自我的wordpress主题并且使用边距而不是填充会导致我无法处理的其他问题。

有没有办法用填充来实现这种行为？

谢谢！ 例： http://jsfiddle.net/thimim/h6pvusau/

HTML：

 <div class="fs_grid_gallery">

<div class="grid-gallery-item">
    <img src="http://propixelpanama.com/wp-content/uploads/2015/09/azrieli-1-540x375.jpg" alt="" class="fw_featured_image">
</div>

<div class="grid-gallery-item">
    <img src="http://propixelpanama.com/wp-content/uploads/2015/09/azrieli-1-540x375.jpg" alt="" class="fw_featured_image">
</div>

<div class="grid-gallery-item">
    <img src="http://propixelpanama.com/wp-content/uploads/2015/09/azrieli-1-540x375.jpg" alt="" class="fw_featured_image">
</div>

<div class="grid-gallery-item">
    <img src="http://propixelpanama.com/wp-content/uploads/2015/09/azrieli-1-540x375.jpg" alt="" class="fw_featured_image">
</div>

</div>

CSS：

.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);     
}