Apply hover effect to responsive image

Question

I am trying to apply a zoom hover effect to a set of 4 images, that I also need to scale as the viewport size decreases. To do so, I set the images so they enlarge while still staying within its bounds, creating a zooming effect. Everything works great as long as I use pixels or ems to define the size of the images, but when I use max-width with percentages to make images responsive the photos are stretched. I created a pen on codepen so you can see what's going on.

Here is my code:

.photo {
    max-width: 23.3%;
    height: auto;
    margin: 0;
    border-color: #FFF;
    border-style: solid;
    background-color: #FFF;
    border-width: 1em;
    float: left;
    cursor: pointer;
    overflow: hidden;
    -webkit-box-shadow: 5px 5px 5px #777;
    box-shadow: 5px 5px 5px #777;   
}

.grow img {
    width: 100%;
    height: auto;
    opacity: 0.7;
    -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
                transition: all 0.5s ease-in-out;  
}

.grow img:hover {
    width: 110%;
    height: auto;
    opacity: 1;
}

<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-6.jpg" 
                alt="Showroom picture 1">
        </div>
</div>
<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-6.jpg" 
                alt="Showroom picture 1">
         </div>
</div>
<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-6.jpg" 
                alt="Showroom picture 1">
         </div>
</div>
<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-6.jpg" 
                alt="Showroom picture 1">
         </div>
</div>

Answer 1

Try this:

.photo {
    ...
    overflow: hidden;
    border: none;
}
.grow {
    padding: 7%;
    overflow: hidden;
}
.grow img {
    ...
    vertical-align: bottom; /* removes extra padding */
}
.grow img:hover {
    transform: scale(1.17);
    ...
}

Demo

Answer 2

Thanks a lot! I solved the issue using the "transform: scale" property instead of increasing the size of the pictures. This recreates a zoom in effect while hovering over the pictures as you can see here

.photo {
    max-width: 23%;
    height: auto;
    margin: 0.1%;
    border-color: #FFF;
    border-style: solid;
    background-color: #FFF;
    border-width: 1em;
    float: left;
    overflow: hidden;
    -webkit-box-shadow: 5px 5px 5px #777;
    box-shadow: 5px 5px 5px #777;   
}

.grow img {
    width: 100%;
    height: auto;
    opacity: 0.7;
    vertical-align: bottom;
    -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
                transition: all 0.5s ease-in-out;  
}

img:hover {
    transform: scale(1.2);
    opacity: 1;
}

<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-6.jpg" alt="Building">
        </div>
</div>

<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-8.jpg" alt="CBD">
         </div>
</div>

<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-10.jpg" alt="Chinatown">
         </div>
</div>

<div class="photo">
         <div class="grow">
                <img src="http://lorempixel.com/output/city-q-c-500-500-2.jpg" alt="Towers">
         </div>
</div>

Now I'm trying to figure out how to zoom the pictures out. If I give a smaller value to the scale property (e.g. 0.8) the pictures get smaller leaving an empty space around them inside the frame.