How to add a slide-back effect on hover for products

[CreatorTim]

Hey guys, I changed the animation to a hover effect on the product. It's simply a slide, so when I hover over it, it slides to the left, and when I move the cursor away, it disappears.

What I want to add is that when I move the cursor away, it slides back to the right.

Here’s the store where it works the way I want it: https://tomnoske.store/collections/all-products

And here’s the code I used for my animation:

<style>
.product-card-wrapper .media.media--hover-effect > img + img {
transform: translateX(100%) !important;
transition: transform 0.2s ease-in-out; /* Adjust the speed here */
}

.card-wrapper:hover .media.media--hover-effect > img + img {
transform: translateX(0%) !important;
transition: transform 0.2s ease-in-out; /* Match the same speed */
}
</style>

Here’s my store URL: https://1049xn-ya.myshopify.com/collections/all

Thanks a lot, I would really appreciate your help,
Tim