Flickering Issues

Store Design
,
1

Hi,

I seem to have to created a problem with every list of products when I edited the code. For some reason, the images of the products on any product list on SpaPLUS.co.uk flickers. I think it has something to do with the scroll on trigger as it happens when you scroll upon the page then disappears, but it happens on every single page/list of products.

Please help me fix this so that it is the standard animation for products that slightly zooms in when hovering over a product image in a list of products.

Thank you in advance.

1 Like
2

Hi @SpaPlusLtd ,
I hope this message finds you well,
Go to Online Store → Themes → Edit code
Open base.css and add this code at the bottom.

/* Fix flicker by disabling scroll-triggered opacity/transform */
.card__inner .media img {
  opacity: 1 !important;
  transform: none !important;
  transition: transform 0.3s ease-in-out;
}

/* Standard zoom on hover */
.card__inner:hover .media img {
  transform: scale(1.05);
}

Save and refresh preview

Best
Manoj

3

Hey @SpaPlusLtd,

In order to do the requested changes requires to do the custom code in your theme file.
Could you please share the 4 digits collab code along with the store url in the p/m so that I can take a look and make the requested changes.

Thanks

4

Hey @SpaPlusLtd,

You’ve diagnosed this perfectly – the flickering you’re seeing is a classic sign of two competing animations.

Your theme (SpaPLUS.co.uk) likely has a “fade/slide in on scroll” animation for the product list. When that JavaScript-driven animation interacts with the browser’s default hover effect (or another CSS animation), they conflict, causing that annoying flicker.

The clean solution is to disable the theme’s built-in scroll animation for that specific product grid, and then implement the zoom-on-hover effect you want using pure, reliable CSS.

The CSS for a simple zoom-on-hover effect would look something like this, applied to your product image wrapper:

CSS

.your-product-image-wrapper {
  transition: transform 0.3s ease-out;
}
.your-product-image-wrapper:hover {
  transform: scale(1.05);
}

The trickiest part is often finding where to disable the theme’s scroll animation without breaking anything else. If you’d like a hand with the precise implementation, this is a quick fix I can certainly help with.

5

Hi @SpaPlusLtd

From your Shopify Admin, navigate to Online Store > Themes > Edit Code
In the Assets folder, open base.css and add your CSS code at the end

.card__inner .media img {
  opacity: 1 !important;
  transform: scale(1) !important;
  transition: transform 0.3s ease-in-out;
  will-change: transform; 
  backface-visibility: hidden;
}
.card__inner:hover .media img {
  transform: scale(1.05);
}
.card-wrapper.product-card-wrapper.underline-links-hover {
  text-decoration: none;
}