我希望为网站建立一个主页。我希望家庭主页有4个或5个矩形，一个接一个，沿着页面的中心。这些矩形中的每一个都将在其中具有图像（向左）和一些文本（向右）。
当用户将鼠标悬停在每个矩形上时，我希望它在页面上垂直向下延伸4-500像素（保持其水平长度），并使矩形低于被剔除的矩形，向下移动页面（以容纳扩大的'抽屉'）。当鼠标从“抽屉”中取出时，“抽屉”缩回以形成原始矩形，其他矩形返回其原始位置。
'抽屉'的内容将是文字和图像，原始矩形保持静止，并作为“抽屉”的标题或标题。我的问题是：我将如何完成让每个矩形扩展，让其他矩形同时移动，然后在取走鼠标时缩回的任务。
我猜这可以用CSS过渡的东西（也许还有一些奇特的HTML5东西？），但这就是我对CSS的知识结束的地方。我意识到这是一个非常大而复杂的问题，所以任何帮助都会非常感激。
非常感谢。