Images move when resizing a single image (CSS and HTML)

Question

So, I have some images that I smoothly zoom in on the mouse. It looks great, but I noticed that the other images next to it are something like moving around to accommodate more or less space when resizing. I want them to just stay in their place. Here is the code:

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

Answer 1

each of these images should be placed in any container with a built-in block that has a static width and height of the enumeration for scrolling images up and down. CSS for this container:

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

Answer 2

It is usually difficult to deploy a child outside its parent without violating any parent siblings.

I whipped it only because I wanted to. It uses box-shadow to make it feel like an image that overlaps other images, with fairly simple CSS3.

It is released under WTFPL .

http://jsfiddle.net/dWBwW/23/