html - ズーム時に他の要素の位置を変更する画像

Question

画像の配列があるページを作成しています。マウスをホバーしたときに画像をズームする必要があり、Javaスクリプトを使用して正常に取得しました。しかし、問題は、画像が拡大されると、他の画像の位置も変更されることです。ズームされた画像がGoogle画像のような他の画像の位置を変更しないようにしたい...つまり、ズームされた画像が画像の横に来るようにしたい....助けてください...よろしくお願いします

Answer 1

絶対配置と z-index を使用する必要があります。

HTML

<div class="container"><img src="#" /></div>
<div class="container"><img src="#" /></div>

CSS

.container {
     position: relative;
}
.container img {
     position: absolute;
     z-index: 0;
}
.container img:hover {
     position: absolute;
     z-index: 1;
}

Answer 2

高さと幅を与えるためにパーセンテージを使用することは避けてください。私もそれを経験しました。代わりに、「pixels（px）」で高さと幅を指定してください。それはあなたの質問のためのより良いそして解決策を提供するでしょう。