Как сделать такой блок?

Question

[Nohaga]

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

Comments

[Rustam Bainazarov]

transform: scale(1.2);
z-index: 2;

Answer 1

[RAX7]

В ms edge не работает сочетание свойств transition и min-height: calc()

Comments

[Ankhena]

В ms edge не работает transition

Поправьте: не работает transition с calc, а то подумают еще не того

[RAX7]

Ankhena, и вправду без calc заработал transition. Чудеса прям=)

Answer 2

[Алексей]

Если absolute применить то он уедет, без скриптов можно так сделать?

Можно поднять его, изменив z-index, тогда не должно уехать. Ну и тень сделать box-shadow, это создаст иллюзию того что блок выше всего контента. Без JS можно обойтись.

Comments

[Nohaga]

если просто поменять у блока высоту, то нижний уедет в независимости от z-index

Answer 3

[TreVL]

Попробуйте transform: scale для увеличения размера при наведении

Comments

[Nohaga]

scale контент растягивает

Answer 4

[Valsin]

Оберните в position: relative, не должен уехать

Comments

[Nohaga]

position: relative влияет на соседние объекты, всё так же уезжает