Issue: Product hover images appear blurry on collection pages, specifically the second image shown on hover, while the first images display correctly.
Primary Solution (Dawn 13.01 theme):
card-product.liquid fileAlternative Solution (Vivid 1.0.5 theme):
card-product.liquid, find the line: {{card_product.media[1] | image_url: width: 100 | image_tag...100 to 1000Status: Multiple users confirmed these solutions worked. The root cause is improper image rendering settings that compress hover images too aggressively. Code modifications vary slightly depending on theme version, but both approaches address the same underlying width/resolution constraint.
Hi,
My collection shows the 2nd product on hover but hovered image looks blurry.
The 1st images was also blurry but i managed to sort it out. Now only the hovered images are blurry on collection pages
Store url: travertable.com
I use dawn 13.01 theme
Can someone help? Thank you
### ### You can remove the lines from here this adjust the resolution of the image rendered, try removing the first 2 line from both of the image set### it should look like this###
### ### It will fix the issue.### You earlier said you fixed the first image quality by yourself, I suggest you revert it back and use this method instead.### ### If you are unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.### ### Hopefully, it will help you. If yes then Please don’t forget to hit Like and Mark it as the solution!
hey if your issue is resolved then can you mark it as solution?
Worked for me. Thanks.
Good afternoon!
We discovered this article, and it’s solid (lead us on the right track as far as getting to card-product.liquid). However, the line of code that was originally suggested was not within our coding.
I then utilized ChatGPT, with their Shopify Sidekick GPT. I was able to resolve the issue by finding the line: {{card_product.media[1] | image_url: width: 100 | image_tag: loading; ‘lazy’, height: height1, sizes; sizes1, … (see image below)
The image below points out the only change I had to make. I had to change the width from 100 to 1000, and this worked!
Just wanted to get this out there in case anyone else runs into this issue. I also have to give thanks to ChatGPT and Shopify Sidekick for going over the current code and pointing out this exact change that was needed. 
Just to make sure that this is communicated clearly, we are currently using Vivid version 1.0.5, so that may have been the difference in coding from the original answer provided here.
