How to create this hover interaction

Design help Animations & Interactions
1

I am trying to recreate the hover animation from the homepage featured elements on this website: www.majstar[dot]framer[dot]website/

I am stuck trying to figure out how to make the hover item scale up while moving the other items as well.

So far I’ve tried…

(1) The Flex Child Sizing options on the hover state, but can only get it to grow in width and not height.
(2) The 2D & 3D transformations on hover, but when I increase the scale the hover item overlaps on top of the others.

Any feedback or direction is greatly appreciated!

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

2

Hi there,

Here’s how to create a smooth scaling hover effect in Webflow:

  1. Select the parent element and set its Children Perspective to 1000 pixels
  2. Select the element you want to scale on hover
  3. In the element’s hover state settings, add a Scale transform
  4. Set the Scale transform values (recommended starting point: 1.1 to 1.2)
  5. Add a Transform transition with a duration of at least 200ms for smooth animation
  6. In the base state, ensure the Scale transform is set to 1 for all axes

Keep in mind that extreme z-axis values may cause the element to disappear from view, so adjust the scaling values gradually until you achieve your desired effect.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.