width: 100% からトランジションするとトランジションがジャンプするのはなぜですか?

Question

この問題を再現するために JSFiddle を作成しました。

グリッド要素をホバー時に拡大させようとしていますが、別のグリッド要素の下に入り、予想どおりにジャンプするという奇妙な問題が発生します。

なぜこのようなことが起こるのでしょうか?解決する方法はありますか？

リーリー リーリー

Answer 1

この効果については詳細な記事を書きました。CSS グリッドを使用してこの効果を実現する方法を学ぶためにぜひ読んでください: https://css-tricks.com/zooming-images-in -a-グリッドレイアウト/＃＃＃＃＃＃

リーリー リーリー

Answer 2

Flexbox と flex结合使用> 短縮プロパティ :

を組み合わせることができます。 リーリー ＃＃＃それを試してみてください：＃＃＃

リーリー リーリー