Hey everyone,
I have a collection list with multiple collection items. Obviously every item has the same hover interaction/animation. But for some reason, when hovering the second and third item, the hover ‘changes’?
This is the page with the 3 collection items:
When hovering an item, a background image appears. The other 2 (that you are not hovering) are still showing because the z-index of the items is bigger than the background image. That’s how it should work. And it does work on the FIRST (first, from left to right) item. (See image under this paragraph)
But when I hover the second and third item, it seems like the background image is IN FRONT of the collection items. But not all! Only the first! You can see what happens when I hover the second item. The first item is suddenly not visible anymore. BUT the third one is! (see image under this paragraph)
Same thing happens when hovering the third item. At this point the background image is also in front of the second item. So here the image is in front of the first and second items? (See image under this paragraph)
I don’t understand it. All items obviously have the same z-index. But for some reason when hovering the second and third item, the image will go in front of some items.
Here is my public share link:
https://preview.webflow.com/preview/cms-collection-issue?utm_medium=preview_link&utm_source=designer&utm_content=cms-collection-issue&preview=d7f85660abf86d28019201a20c7e0a0d&mode=preview
Here is the link of the website:
https://cms-collection-issue.webflow.io/
