Hoover zoom effect with multiple images and keep image dimension - html

Question

I am trying to make a hover zoom effect with multiple images:
images are centered on the page
keep dimensions while zooming in
image width is set inline at img tag
Here is what I tried so far:
.img-zoom {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.img-zoom img {
-webkit-transform: scale(1.04);
-ms-transform: scale(1.04);
transform: scale(1.04);
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
margin: 0px 20px;
}
.img-zoom img:hover {
-webkit-transform: scale(1.21);
-ms-transform: scale(1.21);
transform: scale(1.21);
}
<div style="text-align: center;padding: 5px;">
<div class="img-zoom">
<img src="http://lorempixel.com/600/210" width="300" />
<img src="http://lorempixel.com/600/210" width="300"/>
</div>
</div>
...but the images are extending on mouse hover.

Answer 1

It sounds like you want the images to zoom in without their width/height changing. I've modified your HTML a bit and placed the inline width parameter on the .img-zoom element. I think this accomplishes what you need.
.img-zoom {
display: inline-block;
position: relative;
overflow: hidden;
}
.img-zoom img {
display: block;
width: 100%;
transition: 0.4s ease;
transform-origin: 50% 50%; /* center zoom */
}
.img-zoom img:hover {
transform: scale(1.21);
}
<div style="padding: 5px; text-align: center;">
<div class="img-zoom" style="width: 300px;">
<img src="http://lorempixel.com/600/210" />
</div>
<div class="img-zoom" style="width: 300px;">
<img src="http://lorempixel.com/600/210"/>
</div>
</div>