Images overlap during animation

Design help Animations & Interactions
1

Hey guys.

I have 2 images side by side with no space in between. On hover the image scales in size 30%. One of the images when you hover on it grows but part of the image remains behind the image next to it. The other image grows and stay in front. Any ideas how to get both images to stay in front when hovered on.

Changing the z index doesn’t during the animation does not work

Thanks!

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

2

Yea, that makes sense.

Those transforms (I believe) do not effect the document flow. Meaning applying any of those doesn’t move surrounding elements:

“Use 2D and 3D transforms to manipulate an element’s appearance and position without affecting surrounding elements.” – Transforms | Webflow University

So I’m not sure a z-index would help here:

"Positioned elements may overlap other elements in the natural document flow, therefore you can alter the Z-index value of any positioned element to change its default stacking order. " – Position | Webflow University

There may be some way I’m not aware of (maybe someone else can clue us in) but my first thought would be to not only “scale”, but also “move” on hover to avoid that.

3

2D 3D Transforms might work but I want the image to stay large as long as the person is hovered over it…

I using animations, start an animation then scale.

I could move the image like you said but not sure I want too just yet.

Thanks for the idea. I might have to do it.