Collection - Add a hover effect to product images on your collection pages

Highlighted
New Member
6 0 0
Hey there. I had this same issue at first. You'll need to make all of your
images jpegs, so that the backgrounds are white. I used SEO Image Optimizer
- Tiny IMG to automatically reformat all of my photos to jpeg. It's also a
great tool for SEO optimization as it renames your photo files for you to
match searches.
0 Likes
Highlighted
Tourist
10 0 0

Hi June, 

Thanks for sharing this code, it works really well for Brooklyn.

 

Ronney

BusinessGrowthTalk

0 Likes
Highlighted
New Member
3 0 0

Hi JunePratt, thank you for the code - I copied both your code sections and it worked however it has somehow duplicated the image (I'm working on Brooklyn).

Therefore, I now have two thumbnail images - 1 where the hover works as expected and 2nd which is a static duplicate. Do you know how I can fix the image duplication so that it only shows the one image with the hover function?

 

Please see image below:

Hover images.png

0 Likes
Highlighted
New Member
6 0 0

This works for Debut for me, where other similar instructions do not.

https://www.youtube.com/watch?v=9uxSrOxxZpY

But I would love to find code that would ZOOM the primary image, not just give an alternate image.

0 Likes
Highlighted
New Member
3 0 0

Hi Robert,

 

Thank you so much for the link - I followed the steps and unfortunately it is still duplicating the image. This time it enlarged the second the image (which hovers). See images below:

First ImageFirst ImageImage with Hover (blown up)Image with Hover (blown up)

 

Really struggling with this one  

Kind Regards,

Kevin

0 Likes
Highlighted
New Member
3 0 0
Found the error in my code - all is working now! Thank you so much!
0 Likes
Highlighted
Tourist
14 0 1

doesnt work on brooklyn

the images just tend to overlay eachother

anyone help?

0 Likes
Highlighted
New Member
6 0 0
They have to be jpeg and not png. There are app plugins that will convert
all of your images for you.
0 Likes
Highlighted
New Member
4 0 0

woaw it works !!!! thanks you guy ! I was tried some tuto since 2 days 

0 Likes
Highlighted
Tourist
19 0 2

Hi Ty,

 

I couldnt find the file liquid for "all the product" grid that I can edit on the code.

 

Could you assist with this enquiry?

0 Likes