How to fix hover effect issue

Store Design
, , , ,
1

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

2

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:

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

(I added this to theme.liquid)

Thanks for the feedback!
Tim

3
  • 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 and press ‘Save’ to save it
  • This is the result you will get:

BSSTekLabs_0-1735706895553.png
BSSTekLabs_0-1735706895553.png849×505 25.5 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
4

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

5

Can you describe more clearly what you want?