Image pop-out on mouse hover

I am new to Webflow and web design and am currently working on a personal CMS site for photography and have a question in regards to animations for images. I have yet to publish the site though.

I have currently arranged images in a grid, 2 columns and 13 rows, and was wanting to create an animation where when you hovered over it with the mouse the image would stand out or pop out slightly and when you moved your mouse away it would go back to the original size in the grid.

I was successful in creating the animation and it really looks nice the curves adjusted and all. However, there is a slight problem I ran into and I am needing some assistance or some input on how to resolve the problem.

When starting from the top left and hovering over each image from left to right and down the page the animation works great, and the first image I hover over properly expands over the adjacent image and each image after that does the same. The problem is that when I recommence on each image, they expand but are then seemingly forced to expand underneath the adjacent image as opposed to above it like in the initial animation and I am not sure how to change that.

Any input or help is greatly appreciated.