Weird glitch on card hover

Question

my problem is I used some effect to make the card float using transform(translate) and some shadow and it works just fine, but whenever I come near the edges which is the end of the card width/height, it starts to glitch out with the animation, I believe I know why this is happening but I'm not quite sure how to fix it.. thanks!

Answer 1

just wanted to mentioned that the solution to that kind problems is wrapping the floating item with a wrapper and put the hover action on that wrapper not on the component itself.

so for example:

.card:hover{
    box-shadow: -10px 0 10px 0;
    transform: translate(10px, 10px);
}

Should turn into this:

.card-wrapper:hover .card{
    box-shadow: -10px 0 10px 0;
    transform: translate(10px, 10px);
}