Hover animation issue when moving cursor from one div to another

I have a hover effect on a grid of images where the siblings of the div block that is hovered over either disappear or go slightly transparent depending on the type of image.

When the cursor is moved over the div block from the side of the page, the animation works. The problem is that when the cursor is moved from one div block with the animation to another, it acts differently, not effecting all the siblings.

Thanks in advance!


Here is my public share link:

https://preview.webflow.com/preview/reir-46409eba953e6e03491241f7d239dda9?utm_medium=preview_link&utm_source=designer&utm_content=reir-46409eba953e6e03491241f7d239dda9&preview=1f941763bfcce42df5eefa56b406cead&workflow=preview

Screen recoding of issue:

PAGE: Home