Different image on hover with collection wrapper of over 100 items

Design help Layout & Design
1

Hi,

I have a collection wrapper with another one overlayed so that a different image appears when hovering over each item. It’s been working great but now I have over 100 items, when you go to the next page the images from the previous page appear on hover. Is there a way of fixing this?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

As in two different collection lists overlaid?

I’d redesign that so that each item contains both the image and the hover image, e.g.

DIV - position relative
  IMG 1 - position absolute 
  IMG 2 - position absolute

You can use interactions or hover state to handle the visible-on hover effect.

As a single collection list, pagination will work here.

3

Thanks so much for your help!