Adjust an image of an image (CSS and HTML)

img
{
width:130;
height:130;
margin:15px;
background-color:transparent;
background-size:100%;

-webkit-transition: all 1s ease ;
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
} 

img:hover
{
width:150;
height:150;
margin-left: 0px;
margin-right:0px;
margin-top:0px;
}< /pre> 

.image_container {
 width: 130px;
 height: 145px; /* reserved space for image to scroll up */
 display: inline-block;
}

So I have some images and I am smoothing Zoom in on the mouse. It looks great, but I noticed that other images around it move to accommodate more or less space when resizing. I want them to stay in place. Here is the code:

< /p>

img
{
width:130;
height:130;
margin:15px;
background-colo r:transparent;
background-size:100%;

-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
- moz-transition: all 1s ease;
} 

img:hover
{
width:150;
height:150;
margin -left: 0px;
margin-right:0px;
margin-top:0px;
}

each The image should be placed in any inline block container that has a static width and height so that the image can scroll up and down. CSS for this container:

 .image_container {
 width: 130px;
 height: 145px;/* reserved space for image to scroll up */
 display: inline-block;
}

< /p>