Adjusting code for hover effect on collection page

Adjusting code for 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: (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

Reply 1 (1)

01tranali
Shopify Partner
53 3 5

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; 

}

Best,
T