html - レイアウトに影響を与えないように img:hover が必要

Question

ホバーすると画像が爆破されるギャラリーがあります。現在、画像は拡大されていますが、ページの残りの部分のレイアウトが乱れています。画像を拡大し、残りの画像を台無しにしない方法はありますか?

ここにCSSがあります

.gimg{
    height:85px;
    width:150px;
    float:left;
    margin: 10px 10px 10px 10px;
}
.gimg:hover{
    height:170px;
    width:300px;

Answer 1

transform: scale(n)代わりに CSS3 プロパティを使用します。

.gimg:hover{
    transform: scale(2);     // You might want to add vendor
    transform-origin: 0 0;   // prefixes to these properties
}

注: 画像を中央に展開したくない場合 (変換原点が真ん中にくるようにする)、変換原点を指定することをお勧めします。

transform-origin: posx posy;

この場合transform-origin: 0 0;、画像を左に浮かせているので、使用することをお勧めします。

http://jsfiddle.net/teddyrised/t3rUb/ (ベンダープレフィックスが追加されました)

[編集]:ぼやけた画像の懸念に関しては、画像が拡張されるよりも高い解像度を使用している場合、解像度が低下することを心配する必要はありません。

Answer 2

マージンを適切に減らすことができます。

.gimg {
    height: 85px;
    width: 150px;
    float: left;
    margin: 10px 10px 10px 10px;
}

.gimg:hover {
    height: 170px;
    width: 300px;
    margin: -32px -65px -32px -65px;
}