Как правильно реализовать такой эффект?

Question

[alexgilev]

Добрый день,

Помогите правильно реализовать данный эффект:


Задачи:
1. Средний блок по умолчанию 50% ширины окна
2. 1 и 3 блоки при наведении увеличиваются в ширине, а остальные становятся меньше и показывают текст + кнопку.

Вот что у меня получилось достичь своими силами:
https://jsfiddle.net/vd4e75n6/1/

Проблема:
1. Контент внутри раскрываемого блока дёргается при появлении и появляется быстро и не плавно.

Буду благодарен совету опытных верстальщиков.

Заранее спасибо!

Answer 1

[Денис Инешин]

Как то так: jsfiddle.net/IonDen/4Lqbdzao

Comments

[alexgilev]

Спасибо за вариант, я беспокоюсь как будет появляться текст с кнопкой. В моей версии теги p и a, по умолчанию установлены (display: none), а при наведении они block. В итоге получается, что заголовок дёргается и текст с кнопкой появляются криво. Что можете посоветовать?Спасибо

[Денис Инешин]

alexgilev: используйте анимацию opacity. 0 -> 1. Чтобы невидимый элемент не кликался, добавляйте ему pointer-events: none

Answer 2

[kn1ght_t]

jsfiddle.net/2wLtt6up

Answer 3

[ihorgorobets]

Чисто CSS решение jsfiddle.net/ihorgorobets/yf1xoe41/1