Как корректно сверстать блок?

Question

[Сергей]

Добрый день. Помогите, пожалуйста, корректно сверстать блок раскрывающийся.

1. Как его расположить в центре страницы, так чтобы он разъезжался в обе стороны, а не в одну как сейчас.
2. Как заставить фон блока, медленно, во время раскрытия, окрашиваться в другой цвет?

Идеальный вариант:

Вот сейчас так на сайте. Хотелось бы такого же эффекта добиться с этим блоком (т.е. в центре оба блока с картинкой и текстом)

4. Есть ли возможность перемещать картинку после раскрытия. Т.е. в закрытом виде картинка слева, текст справа, а в развернутом картинка сверху, а текст ниже нее? См. скрин:

Comments

[Dark Hole]

А внятнее? Тот, что на картинке, можно сверстать блоками.

[Сергей]

Dark Hole: Тот что на первой картинке и так сверстано блоками. Интересно как реализовать это в примере который я указал (в кодпене).

[Dark Hole]

Сергей: тут надо верстать сеткой. Бутстрпа или какого-то другого фрейма. Иначе неудобно

[Егор Живагин]

Друже, я бы переверстал на твоём месте. Зачем ты положил зелёный блок в li ? Зачем у него position: absolute? Зачем такой миллион обёрток?

Сейчас ты не отцентруешь нормально, у тебя там JS зачем то left и right блоку задаёт.

[Егор Живагин]

2) transition: background-color 0.3s;

Answer 1

[Ankhena]

Количество оберток ужасное.

1. Как его расположить в центре страницы, так чтобы он разъезжался в обе стороны, а не в одну как сейчас.

Вариантов размещение блока посередине масса. Например, при известной ширине, margin:auto, при неизвестной left: 50%; transform: translateX(-50%)
Соответственно при изменении ширины, он разъедется в обе стороны.

2. Как заставить фон блока, медленно, во время раскрытия, окрашиваться в другой цвет?

Меняйте цвет фона https://webref.ru/css/transition