Как разделить блок на две части вместе с содержимым?

Question

[Максим Варава]

Добрый вечер, суть вопроса такова, что есть блок со списком, но при наведении он должен разделяться по полам и в центре должно появляться изображение. Выглядеть должно примерно вот так при наведении.
Уточню, что блок не просто растягивается по высоте, он именно должен разрываться.

Если честно ничего не приходит в голову кроме как создать 2 одинаковы блока и при наведении растягивать их в стороны.
Если кто то сталкивался с подобным, буду благодарен за совет.

Comments

[Ankhena]

При наведении делаете columns.
Цвета либо всё градиентами либо красный с белым блок вставляете абсолютом.

Answer 1

[FeST1VaL]

Примерно так

Answer 2

[kulaeff]

Теория
Делаем два слоя A и B, которые будут раздвигающимися половинками. Каждый из этих слоев имеет высоту H и `overflow: hidden`. Делаем два слоя с одинаковым содержимым X и Y, каждый из которых имеет высоту H*2 и выравнивание текста по вертикали. Вставляем слой X в слой A и абсолютно позиционируем его по верхнему краю. Вставляем слой Y в слой B и абсолютно позиционируем его по нижнему краю. Таким образом мы добьемся того, что слои A и B это как будто бы один слой с монолитным содержимым. Под слоями A и B размещаем слой C, который и будет появляется при "разрыве" слоев А и B.

Схема


Реализация
https://jsfiddle.net/vwdfqkph/1/

За кроссбраузерность не отвечаю, ибо используются флексы, но можно переделать и без флексов. Главное суть, надеюсь, донес.