How to fix hover effect issue

How to fix hover effect issue

CreatorTim
Navigator
471 1 71

Hi, I have a problem with the hover effect on a button and on a product.

 

When I hover over the button or product, it tilts about 10 degrees to the right.

 

What could be causing this? I don’t even remember making any changes.

 

You can check out the button here: https://1049xn-ya.myshopify.com/
And the product here: https://1049xn-ya.myshopify.com/collections/all

 

Thank you so much for any help.
Tim

Replies 4 (4)
CreatorTim
Navigator
471 1 71

Honestly, I don’t know. I haven’t installed any new plugins; I’ve just added some code. Could it be caused by one of the codes?

 

Or is there a way to fix it with code?

 

Here’s the code I used for the hover effect on the button:

.button {border: 1px solid black;}.button:hover {color: white; background-color: black; transition: 0.5s;}

 

(I added this to the custom CSS for the section.)

 

And here’s the code I used for the hover effect on the product:

<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 added this to theme.liquid)

 

Thanks for the feedback!
Tim

 

BSS-TekLabs
Shopify Partner
2401 695 835

- Here is the solution for you @CreatorTim 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.button:hover {
    transform: none !important;
}
</style>

- This is the result you will get:

BSSTekLabs_0-1735706895553.png

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
CreatorTim
Navigator
471 1 71

Hey, it works for the button, but I’d like to do the same for the product’s appearance.

How can I fix it so that the product is aligned as well?

 

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

 

 

Thanks a lot,
Tim

BSS-TekLabs
Shopify Partner
2401 695 835

Can you describe more clearly what you want?

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now