Shopify themes, liquid, logos, and UX
Hey guys, I added my custom hover effect to the collection page.
Here’s the code I used for it:
<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 here the code is not same so as per code you can use this class with same css code ".product__media__image:hover{}"
What do you mean? Could you please provide me with the updated code?
Here you go..
.product__media__container:hover .product__media__image {
transform: translateX(100%) !important;
transition: transform 0.2s ease-in-out;
}
<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 */
}
.product__media__container:hover .product__media__image {
transform: translateX(100%) !important;
transition: transform 0.2s ease-in-out;
}
</style>
But it still doesn't work.
I want the effect to look like on this store: https://tomnoske.store/collections/all-products
Let's remove old code and use the code i provided please.
Man, this is completely different from what I wanted. I want the hover effect to look exactly like on this page: https://tomnoske.store/collections/all-products
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