JSとCSSを使用してギャラリーからスクリーンの中心に画像を拡大

Question

画像の3次ギャラリーがあり、私の要件はマウスのホバーで画面の中央に拡大縮小する必要があります。私はいくつかの解決策を検討しましたが、画面上に現在存在する正確な位置に画像を拡大します。

画像が拡大縮小されている間、残りのすべてのギャラリーはバックグラウンドで移動する必要があります。

私はこれを行う方法を提案してください。投稿するコードがある場合はお知らせください。

Answer 1

上記の提案を追加することでJoramandaが提案したように、これは正常に動作しているようです。下はcssなので、左上の頂点とzのインデックスを調整して、目的の効果を生成します。

.polaroid { 
    width: 33%; 
    background-color: white; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 
     rgba(0, 0, 0, 0.19); 
    float: left; 
    border: thin; 
    -webkit-transition: all 200ms ease-in; 
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in; 
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in; 
    -moz-transform: scale(1); 
    transition: all 200ms ease-in; 
    transform: scale(1); 
} 

img { 
    width: 100% 
    -webkit-transition: all 200ms ease-in; 
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in; 
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in; 
    -moz-transform: scale(1); 
    transition: all 200ms ease-in; 
    transform: scale(1); 

} 

.container { 
    text-align: center; 
    padding: 10px 20px; 
    float: left; 
    -webkit-transition: all 200ms ease-in; 
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in; 
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in; 
    -moz-transform: scale(1); 
    transition: all 200ms ease-in; 
    transform: scale(1); 
} 

.polaroid:HOVER { 
    position:absolute; 
    left: 20%; 
    right: 20%; 
    top:20%; 
    z-index:10; 
    box-shadow: 0px 0px 150px #000000; 
    z-index: 2; 
    -webkit-transition: all 200ms ease-in; 
    -webkit-transform: scale(1.9); 
    -ms-transition: all 200ms ease-in; 
    -ms-transform: scale(1.5); 
    -moz-transition: all 200ms ease-in; 
    -moz-transform: scale(1.5); 
    transition: all 200ms ease-in; 
    transform: scale(1.5); 

}