Как сверстать секцию (анимация)?

Question

[arctic07]

Подскажите как сверстать эту секцию. Я где то видел похожие, но сейчас не могу найти их. Может есть плагин для подобных секций? Без JS это можно сделать?

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

Comments

[Hyubert]

Ну если CSS то нужно эксперементировать, я тут немного поробовал вот что получилось. Пожже попробую доделать

[NeuroPastor]

Ну так то что надо по моему.
Только с положением на странице надо поколдовать при наведении - левые 2 блока от левой стороны растут, правые 2 от правой. Было бы явно красивее если бы от центра.

[arctic07]

Hyubert: Спасибо!

[arctic07]

Hyubert: а как текст туда вставить ?

Answer 1

[NeuroPastor]

элементарно без js
Сначала верстаешь маленькую иконку ("Большой выбор" и "+"), при наведении на нее transition + появление (opacity/display) большого блока и нет проблем.

Comments

[arctic07]

примерно так и думал, но забыл про опасити) спасибо!
а как сделать чтобы линии разъезжались в стороны когда большой черный круг появлятся будет?
и как сделать линии?