The outgoing product card moves the rest of the cards. How can I make them overlap each other?

Question

css

Good afternoon. There is such a sketch of the catalog. https://jsfiddle.net/Kasyanov10/kmnzs4b5/3/ Written using CSS Grid. The bottom line is that when you hover over the card, it should increase and the text should appear. This is implemented, but when the card is enlarged, it moves the cards from the bottom. How to make it so that when you hover, the card is superimposed on the bottom one and does not move the rest of the cards from the bottom?

And another problem is that the cards are not included in the container - they should be centered, but pressed to the left.

PS: And how to make the text also appear with animation?

Many thanks to everyone who answers my questions.

Answer 1

keep https://jsfiddle.net/zuj0357b/

Answer 2

transform: scale(1.5);