How to change the hover effect for the products.

Store Design
, , , , , ,
1

Hey guys, I need help with changing the hover effect for the products.

Currently, I’ve managed to get closer to the style I want using this code:

.product-card-wrapper .media.media--hover-effect > img + img { transform: translateX(100%) !important; } .card-wrapper:hover .media.media--hover-effect>img+img { transform: translateX(0%)!important; }

But I’d like to make it even faster. How can I do that?

I want everything to look exactly like it does here: https://tomnoske.store/collections/all-products

And here’s how it looks on my store: https://1049xn-ya.myshopify.com/collections/all

Thanks so much,
Tim

2

Thanks, it works, but I have a couple of issues:

  1. When I hover over it, the entire product image tilts about 10 degrees to the right. How can I fix that?

  2. When I hover over it, a shadow appears below the image. I don’t want that, how can I remove it?

  3. I’d like it so that when I hover away from the product, it slides back in the opposite direction. exactly like it is here: https://tomnoske.store/collections/all-products

Simply put, I just want the slide effect. No shadow, no tilting and slide back.

By the way, I had the exact same tilting issue with a button, and it was fixed with this code:

.button:hover { transform: none !important; }

Thanks so much for your help, I really appreciate it.
Tim

3

Thanks, it works, but I have a couple of issues:

  1. When I hover over it, the entire product image tilts about 10 degrees to the right. How can I fix that?

  2. When I hover over it, a shadow appears below the image. I don’t want that, how can I remove it?

  3. I’d like it so that when I hover away from the product, it slides back in the opposite direction. exactly like it is here: https://tomnoske.store/collections/all-products

Simply put, I just want the slide effect. No shadow, no tilting and slide back.

By the way, I had the exact same tilting issue with a button, and it was fixed with this code:

.button:hover { transform: none !important; }

Thanks so much for your help, I really appreciate it.
Tim

4

Hey, thanks for the feedback. I added the code to base.css, and it worked for the tilting and shadow issues.

However, the slide-back effect isn’t working.

When I hover over it, it slides normally, but when I hover away, it just disappears. I’d like it to slide back, just like it does here: https://tomnoske.store/collections/all-products

And here’s how it looks on mine: https://1049xn-ya.myshopify.com/collections/all

Thanks so much for your help,
Tim

5

Hey, thanks for the feedback. I added the code to base.css, and it worked for the tilting and shadow issues.

However, the slide-back effect isn’t working.

When I hover over it, it slides normally, but when I hover away, it just disappears. I’d like it to slide back, just like it does here: https://tomnoske.store/collections/all-products

And here’s how it looks on mine: https://1049xn-ya.myshopify.com/collections/all

Thanks so much for your help,

6

So how can I do that?