1つの画像のサイズが変更されたときに画像が移動する（CSSとHTML）

Question

私はマウスオーバーでスムーズに拡大表示する画像をいくつか持っています。素晴らしいですが、近くにある他の画像がサイズ変更すると多かれ少なかれスペースに適応するように動いていることに気付きました。私は彼らにちょうど適所にとどまって欲しい。

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

この画像の各々は、画像が上下にスクロールするための静的幅とenougn高さを有する任意のインラインブロックコンテナに入れなければならない：ここではコードです。このコンテナのためのCSS：

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

Answer 2

それはそれは親の兄弟を乱すことなく、親要素だの境界を越えて子要素を展開する種類のハード通常です。

私はこれがほしいと思ったからです。ボックスシャドーを使用して、イメージのように他のイメージと重複しているように感じさせます。かなり単純なCSS3です。

WTFPLで公開されています。

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