Hover state showing behind another object

Hello everyone...
Ii really would appreciate help with this.
I have cards that are supposed to be dragged and dropped on top of a drop object.
It happens that the cards have a hover state with a lot of information that wouldn't fit in the card itself.
The problem is that when I drag one card to the drop object the hover state of the other cards appears behind the object, not allowing to read the information of the hover state.

I looked a lot, found a tutorial by jeff Batt where he shows how to pull objects to the top with JavaScript, I tried it do make the drop objects stay behind, but it didn't work.

let controls = document.querySelector("[data-model-id='6440j0BxYaj']");
controls.style.zIndex = "1"

I'm all out of ideas.
Any help would be much appreciated.
Thank you 

Jose