ホバリングイメージオーバーラップの問題を拡大する（CSS Transform：Scale）

Question

私は、ホバリングでページ幅の約80％を拡大する複数のイメージを表示できるページの作成に苦労しています。 これを行うには、ここで他の質問の回答に基づいて、変換：scale()を使用しました。 私が直面している問題は、拡大したときに画像が重なり合うように見えるということです。 私が達成しようとしているのは、画像が拡大または縮小するのではなく、ページの下にお互いに押しつけることです。

私はこの問題を解決しようとしています。一般的にコーディングは私には非常に新しいものです。事前に

https://jsfiddle.net/msandford/zjrc7v6s/

.image1 { `display:block; 
position: relative; 
width: 10%; 
left:40%; 
height: auto; 
transition: 0.4s ease-in-out; 
-webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
z-index:1; 
} 
.image1:hover { 
display:block; 
position: relative; 
transform: scale(4); 
transition: 0.4s ease-in-out; 
-webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
z-index:1; 
} 
.image2 { 
display:block; 
position: relative; 
width: 10%; 
left:40%; 
height: auto; 
transition: 0.4s ease-in-out; 
-webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
z-index:1; 
} 
.image2:hover { 
display:block; 
position: relative; 
transform: scale(4); 
transition: 0.4s ease-in-out; 
-webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
z-index:1; 
} 
.image3 { 
display:block; 
position: relative; 
width: 10%; 
left:40%; 
height: auto; 
transition: 0.4s ease-in-out; 
-webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
z-index:1; 
} 
.image3:hover { 
display:block; 
position: relative; 
transform: scale(4); 
transition: 0.4s ease-in-out; 
-webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
z-index:1; 
} 

感謝。

Answer 1

機能は元の要素のバウンディングボックスを保持し、他の画像をプッシュしないで、余白（上下）を追加して遊んでいた可能性がありますが、画像がジャンプして、widthプロパティ（なぜ？scale()につながったあなたの最初の質問だったか？）

#scale { 
 
    text-align: center; /* to align all inline content inside the div */ 
 
} 
 

 
#scale img { 
 
    width: 150px; 
 
    transition: 0.4s ease-in-out; 
 
    -webkit-transition: all .4s ease-in-out; 
 
    -moz-transition: all .4s ease-in-out; 
 
    -o-transition: all .4s ease-in-out; 
 
    -ms-transition: all .4s ease-in-out; 
 
} 
 

 
#scale img:hover { 
 
    width: 80%; 
 
}

<div id="scale"> 
 
    <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br> 
 
    <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br> 
 
    <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"> 
 
</div>

はまた、私は私はあなたが間違ったクラスを使用していたことを指摘しなければならないと思います。

classは、すべての画像に適用する文字列で、.scalethis{}をcssで使用すると、一度にすべての画像に適用することができます。

どのように使用したかのようでしたid