Remove zoom & fade animation from collection list images

Caroline83 · ‎06-04-2024

Hi all!

I'd like to remove the fade and zoom animation on my collection images - the animation appears when I use a collection list and when you hover the mouse over the collection image. I'm using the Capital Theme.

Many thanks for your help!
Caroline

Dan-From-Ryviu · ‎06-04-2024

Hi @Caroline83

You can do that by following this:

Open Online Store > Themes
Click "..." > Edit code in Capital theme
Open theme.liquid file, add this code after <head>

<style>
.index-collectionlist .index-features-item:hover figure div { transform: scale(1) !important; }
<style>

Save file.
Reload your page to check

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Caroline83 · ‎06-05-2024

Thanks Dan!

This has removed the zoom, which is great. However, the image still fades when I hover the mouse over it. How could I remove this fade effect please?

Thanks again and have a fab day!

Caroline

Dan-From-Ryviu · ‎06-05-2024

Could you share your store URL to check?

- Found this helpful? Hit "Like" and "Accept as Solution"! Support me: Donate!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Caroline83 · ‎06-05-2024

https://studioparga.com/

Caroline83 · ‎06-05-2024

Hi Dan! I had to remove the code you suggested since it stopped my website from working properly - links to collections disappeared, preview thumbnails didn't change when selecting product variants, image with text elements disappeared, and more.

But thank you for trying.

Caroline

Remove zoom & fade animation from collection list images

Remove zoom & fade animation from collection list images

Community Blog Articles