Changing the hover effect for the products.

[CreatorTim]

Hey guys,

I want to change the hover effect for the products.

Currently, I have the default Shopify animation. I’d like to change it to a quick slide to the left.

The second thing I want is that when I hover over a product, a shopping bag icon with "Quick Buy" appears in a circle at the bottom-right corner.

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

And here’s my store URL: https://1049xn-ya.myshopify.com/collections/all

Thanks so much,
Tim

[Made4uo-Ribe]

Hi @CreatorTim 

This design is doable. If the design is not available in your theme, it will require a custom design. You might need a developer; if you're interested, you can reach out to us. Thanks!

[shreyhweb]

Hello,

This is custom functionality but we can provide a solution for it. This is not a perfect solution similar to reference but you can move left the second image slide effect. Please paste the below code in your theme.liquid file above </body>.

<style>
.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;
}
</style>

I hope you like this solution. if you like it then please like my solution and accepted.

Thank you

[CreatorTim]

Alright, thanks! Would it be possible to have just the slide there and, if possible, make it faster?

Right now, the entire product tilts about 5 degrees to the right when I hover over it. I'd like to have only the slide there.

And if possible, could you make the slide faster?

You can check how it works here: https://1049xn-ya.myshopify.com/collections/all

Thanks a lot,
Tim