Personalized checkout and custom promotions with Shopify Scripts
Hey guys, I added my custom hover effect to the collection page.
Here’s the code I used for it: (Added it to the theme.liquid)
<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 so you can take a look: https://1049xn-ya.myshopify.com/collections/all
And here’s the store where I want it to look the same: https://tomnoske.store/collections/all-products
So, the only thing I want is for the image to slide back to the other side when I move the cursor away. That’s all I need. Just a slide-back effect when hovering off.
Thanks a lot,
Tim
Hi @CreatorTim ,
Try below and let me know if it's work-
.product-card-wrapper .media.media--hover-effect > img + img {
transform: translateX(100%) !important;
transition: transform 0.2s ease-in-out;
}
.card-wrapper:hover .media.media--hover-effect > img + img {
transform: translateX(0%) !important;
}
.card-wrapper:not(:hover) .media.media--hover-effect > img + img {
transform: translateX(100%) !important;
transition: transform 0.2s ease-in-out;
}
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025