Z-index popping on hover (gif included)

Hi guys, I'm designing a card for a porfolio website and the card grows on hover. The problem I'm having is that the order in which the cards are rendered affects which one overlaps the other. So I added a high z-index value to the card on hover. The problem with that approach is that the moment the mouse hovers over another card, it pops/overlaps the currently animating card.

Does anyone have a potential solution to this challenge?

I uploaded a gif to illustrate the problem: https://imgur.com/a/WvqAgUY