画像の位置を周囲のテキストから独立させる方法

Question

私は画像を持っています。 マウスが上に来ると、画像が5倍大きくなり、マウスがその領域を離れると通常に戻ります。 画像が大きくなると、その下のテキストが小さくなり、そのようなことは起こりたくありません。 どうすればいいですか？ ポジション：私にとっては絶対的ではありません。この場合、私の書式設定はさまざまなブラウザや画面でひどく見えます。

あなたの誰かが私に別の方法を見つけるのを助けてくれたらうれしいです。

Answer 1

レオは正しい軌道にありましたが、何かが欠落していました。画像が拡大している間、余白が "内側に"成長するように余白を "修正"する必要があります。
少なくともposition: relative;で画像を配置する必要がありますので、z-indexが適用されます。ここで

は、編集/フム
http://jsfiddle.net/utNa2/

実施例へのリンクです... Zインデックスが、この場合に必要とされていないようです。

Answer 2

私はjQueryのを使用します。

$("#ImageId").mouseover(function() { 
$("#ImageId").css("z-index", "2"); 
$("#ImageId").animate({height:"500px",width:"500px"}, "fast"); 
}); 
$("#ImageId").mouseout(function() { 
$("#ImageId").css("z-index", "1"); 
$("#ImageId").animate({height:"200px",width:"200px"}, "fast"); 
}); 

これも画像が大きいときposition:absoluteを試してみてください、あまりにも

Answer 3

を素敵に見えるかもしれません。