zoom image on mouse hover in css

Question

I don't understand what is happening with my code. Everything works fine but, the main problem is that the next image is shifting to the next line. I don't want to shift the image to next line. Is there any solution so that the image remain in that line. I don't want to use any <table> tag. Please help...!

Here's my code:

 img { max-width: 100%; display: inline-block; } .imz { top: 50%; left: 100%; width: 150px; height: 150px; -webkit-transform: translate(-50%,-50%); /* Safari and Chrome */ -moz-transform: translate(-50%,-50%); /* Firefox */ -ms-transform: translate(-50%,-50%); /* IE 9 */ -o-transform: translate(-50%,-50%); /* Opera */ transform: translate(-50%,-50%); } .emz { width: 100%; height: 100%; } .emz img { -webkit-transition: all 0.5s ease; /* Safari and Chrome */ -moz-transition: all 0.5s ease; /* Firefox */ -o-transition: all 0.5s ease; /* IE 9 */ -ms-transition: all 0.5s ease; /* Opera */ transition: all 0.5s ease; } .emz:hover img { -webkit-transform:scale(1.05); /* Safari and Chrome */ -moz-transform:scale(1.05); /* Firefox */ -ms-transform:scale(1.05); /* IE 9 */ -o-transform:scale(1.05); /* Opera */ transform:scale(1.05); } 

 <div class="imz"> <div class="emz"> <img src="https://www.w3schools.com/css/img_fjords.jpg" height="150px"> </div> </div> 

Answer 1

Here is the updated answer, you only need to add overflow:hidden and remove some extra styles

HTML

<div class="imz">
   <div class="emz">
    <img src="https://www.w3schools.com/css/img_fjords.jpg" height="150px">
   </div>
</div>

CSS

img {
 max-width: 100%;
 display: inline-block;
}
.imz {
  top: 50%;
  left: 100%;
  width: 150px;
  height: 150px;
}
.emz {
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.emz img {
  -webkit-transition: all 0.5s ease; /* Safari and Chrome */
  -moz-transition: all 0.5s ease;    /* Firefox */
  -o-transition: all 0.5s ease;      /* IE 9 */
  -ms-transition: all 0.5s ease;     /* Opera */
  transition: all 0.5s ease;
}
.emz:hover img {
 -webkit-transform:scale(1.05); /* Safari and Chrome */
 -moz-transform:scale(1.05);    /* Firefox */
 -ms-transform:scale(1.05);     /* IE 9 */
 -o-transform:scale(1.05);      /* Opera */
 transform:scale(1.05);
}