Я хочу создать домашнюю страницу для веб-сайта.Мне бы хотелось, чтобы на домашней странице было 4 или 5 прямоугольников, один за другим, по центру страницы.Каждый из этих прямоугольников будет иметь изображение (слева) и текст (справа) внутри.
Когда пользователь наведет курсор на каждый прямоугольник, я бы хотел, чтобы он расширялся вертикально вниз на страницу на 4-500 пикселей (при сохранении его горизонтальной длины), и чтобы прямоугольники были ниже того, который был наведен, сдвиньте внизстраницы (для размещения расширенного «ящика»).Когда мышь вынута из «выдвижного ящика», «выдвижной ящик» убирается, образуя исходный прямоугольник, а остальные прямоугольники возвращаются в исходное положение.
Содержимое «ящиков» будет текстовым иизображения, с оригинальным прямоугольником, оставшимся неподвижным и выступающим в качестве заголовка или заголовка для «ящика».Мой вопрос: как бы я выполнил задачу расширения каждого из прямоугольников, чтобы другие прямоугольники двигались одновременно, а затем убирались, когда мышь убирали.
Я предполагаю, что это будет сделано с помощью CSS-переходов (и, может быть, некоторых изворотливых HTML5-вещей?), Но на этом мои знания CSS заканчиваются.Я понимаю, что это довольно большой и сложный вопрос, поэтому любая помощь будет высоко ценится.
Большое спасибо.