How do I bring objects to the front when animated in effects?

Design help Animations & Interactions
1

Helloo!!

I’m looking for help with effects.

I’ve added “effects” to div blocks within a grid to build out a testimonial page. The idea is to have the image expand so it is easier to read. Some images are hiding behind others, how can I order the div blocks on the page so each time an image is hovered over, it comes to the top? Right now it just expands and seems random if it’s above or below the surrounding images.

Note: I’ve tried adding “Top” under effects–> transitions but it doesn’t seem to be doing anything.

Here’s my link: https://preview.webflow.com/preview/gravy-staging?utm_medium=preview_link&utm_source=designer&utm_content=gravy-staging&preview=9be13ba9cd4cbefdacc6a4f3575c49e1&pageId=5f355c6dd9a1468bc4f34dfd&mode=preview

Thank you!

Here is my public share link: LINK
(how to access public share link)

2

Just go to your .box-hover hover state and set the position to relative and give it a z-index of 1:

image