Adjusting hover effect on collection page

Adjusting hover effect on collection page

CreatorTim
Trailblazer
408 1 55

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

Replies 6 (6)

ShakhawatArafat
Shopify Partner
57 12 20

Hi here the code is not same so as per code you can use this class with same css code ".product__media__image:hover{}"

CreatorTim
Trailblazer
408 1 55

What do you mean? Could you please provide me with the updated code?

ShakhawatArafat
Shopify Partner
57 12 20

Here you go..

.product__media__container:hover .product__media__image {
    transform: translateX(100%) !important;
    transition: transform 0.2s ease-in-out;
}
CreatorTim
Trailblazer
408 1 55
It doesn't work. Where should I put the code? I put it in the base.css, but it's not working. Then I also added it to that code, which now looks like this:
 

 

<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

ShakhawatArafat
Shopify Partner
57 12 20

Let's remove old code and use the code i provided please.

CreatorTim
Trailblazer
408 1 55
 

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