Highlight theme - Wanting to remove slight animation on hover in Collections

Store Design
, ,

Topic summary

A user wants to remove the subtle bounce/animation effect that occurs when hovering over items on their collection pages using the Highlight theme.

Two solutions were provided, both involving adding CSS code:

Solution 1: Add the following to the end of theme.css file:

.product-item--move a:hover .product-item__image {
  transform: none;
}

Solution 2: Add this code to theme.css with !important flag:

.product-item--move a:hover .product-item__image {
  transform: unset !important;
}

Both approaches target the same CSS class to disable the transform animation on hover. The discussion remains open with no confirmation from the original poster about which solution worked.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

I’m looking to ditch the subtle bounce that happens on hover in the collections page on my website!

Using Highlight theme, my website is www.collecte.nz pw Pepper2020

2

@hsteptoe - please add this css to the very end of your theme.css file and check

.product-item--move a:hover .product-item__image{transform: none;}
3

Hi @hsteptoe .

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can go to Online store => themes => actions => edit code and add this code on file theme.css

.product-item--move a:hover .product-item__image {
transform: unset !important;
}

Hope this answer helps.

Best regards,

Richard | PageFly