4
ウェブサイトのホームページを作成しようとしています。ホームページの中央に4〜5個の長方形が順番に並びます。これらの四角形のそれぞれは、その中にイメージ（左に）とテキスト（右に）を持っています。CSSとHTMLを使用してスライドアウトパネルを作成する
ユーザーが各矩形の上にマウスを置くと、ページを縦方向に4〜500ピクセル（水平方向の長さを維持したまま）に伸ばし、矩形にマウスを重ねるようにして、 （拡張された「引き出し」を収容するため）。マウスが「引き出し」から取り出されると、「引き出し」が収縮して元の長方形になり、他の長方形は元の位置に戻ります。
「引き出し」の内容は、元の長方形が静止したままで、「引き出し」のタイトルまたはヘッダーとして機能するテキストとイメージになります。私の質問は、どのように矩形を拡大し、同時に他の矩形を移動させ、マウスを離したときに後退させるのかというタスクを達成することです。
私はこれがCSSのトランジション（そしておそらくファンシーなHTML5のものもありますか？）だと思いますが、これがCSSの知識が終わるところです。私はこれが非常に大きくて複雑な質問であることを理解していますので、どんな助けでも大歓迎です。
多くのありがとうございます。