他の画像を動かさずに、他の画像の上に画像を置く方法は？

Question

元々、私のCSSでは、4つの画像が一緒に設定されています。 2は上にあり、互いに隣に浮かび、2は下にあります。

.img1 { 
    float: left; 
} 

.img2 { 
    float: left; 
} 

.clear1 { 
    clear: both; 
} 

.img3 {float: left;} 
.img4 {float: left;} 
.clear {clear: both;} 

これは4枚の画像が互いに隣であるために私が持っているコードの基本的な考え方であり、上2、及び底部に2。私は最初のイメージを上に置いて、ページ上の他の3つのイメージをカバーしたい。私は、イメージのホバーを作るために、私は.img1:hover {の後に複数の属性をしなければならないことを知っています。

私はそれが他の3枚の画像が移動することなく、拡大すると画像が、他の3枚の画像をカバーするようにする方法について気づいていませんよ。誰かがこれを行う方法を知っているなら、助けてください。私がちょうどimg1を大きくしたとき、それは他の3つの画像を押し下げてしまい、私はそれを望んでいません。

研究その他z-index属性を使用することが役立つかもしれないことを示したが、私はそれを使用する方法について気づいていませんよ。

<div class="img1" > 
</div> 


<div class="img2" > 
</div> 


<div class="img3" > 
</div> 


<div class="img4" > 
</div> 

Answer 1

デモ：

.images{ 
    position:relative; 
    overflow:hidden; 
} 
.img1, .img3 { 
    float: left; 
    max-width:49%; 
} 

.img2, .img4 { 
    float: right; 
    max-width:49%; 
} 

.images img{ 
    max-width:100%; 
} 

.images img:hover{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    max-width:100%; 
    z-inedx:9; 
} 

Answer 2

z-インデックス値を使用するには、まず静的以外の位置プロパティを設定する必要があります。相対を選択すると、イメージは期待どおりに動き回ります。次に、他のものの上に表示する画像のZ-インデックスをより高い数値に設定することができます（デフォルトは0です）。

.img1, .img2, .img3, .img4 { 
float:left; position: relative; } 
.img1: hover { 
z-index:10; }