Выезжающая карточка товара двигает остальные карточки. Как сделать так, чтобы они накладывались друг на друга?

Question

[Даниил Касьянов]

Добрый день. Есть вот такой набросок каталога. https://jsfiddle.net/Kasyanov10/kmnzs4b5/3/ Сверстан с помощью CSS Grid. Суть такова, что при наведении на карточку, она должна увеличиваться и должен появляться текст. Это реализовано, но когда карточка увеличивается - она двигает карточки снизу. Как сделать так, чтобы при наведении, карточка накладывалась на нижнюю и не двигала остальные карточки снизу?

И ещё проблема в том, что карточки не входят в контейнер - они должны быть по центру, но прижимаются влево.

P.S: А как сделать так, чтобы текст тоже появлялся с анимацией?

Большое спасибо всем, кто ответит на мои вопрсы.

Comments

[Ankhena]

Появляющуюся часть сделать абсолютом. Она не будет растягивать родительский блок.

[Даниил Касьянов]

Ankhena, в таком случае текст выезжает в правом верхнем углу экрана. Не зависимо, на какую карточку я навёл курсор

[Ankhena]

Даниил Касьянов, ну так relative тому, относительно кого нужно позиционировать

[Даниил Касьянов]

Ankhena, все равно не могу сообразить. Можете, пожалуйста, дать строчку кода которую нужно вставить и сказать куда именно её вставить?

Answer 1

[Ankhena]

держите https://jsfiddle.net/zuj0357b/

Answer 2

[Евгений]

transform: scale(1.5);