Размер блока при наведении?

Question

[alalala]

Подскажите
может примеры есть реализации, либо как этот эффект называется
не могу понять как сделать
абсолютным позиционированием что то не получается
в общем задача сверстать сетку продукции
при наведении на 1 продукт его размер увеличивается по высоте(вниз) и как бы вылазит поверх нижнего
и не рвет сетку. все остальные блоки остаются на местах
пример как на розетке

Comments

[Ankhena]

пример как на розетке

Откройте инструменты разработчика и посмотрите.

Суть в том, что есть обертка карточки, высота которой не меняется. И в ней другой блок, прибитый абсолютом. Его высота и меняется. Он вываливается из родителя и перекрывает строки ниже.
Можно играть с прозрачностью и pointer-events.
Смотря что в макете.

[alalala]

Ankhena,
именно так
но высота должна быть не фиксирована
вот в чем загвоздка

[Ankhena]

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

Answer 1

[DevMan]

https://jsfiddle.net/ozbfL97k/

Answer 2

[srjkaaa]

Если правильно понял - вот пример

transform: scaleY(value); где value с значением равным 1 (дефолт) и соответственно можно управлять в меньшую и большую сторону уменьшением/увеличением элемента < 1 и > 1;
transform-origin: top; устанавливает начало координат для трансформации элемента;
transition: transform 300ms; (shorthand), для того чтобы трансформация выполнялась 300мс.

Answer 3

[Полина Емельянова]

Типа как тут кодепен Ховер кард