Can't get rid of image margins with scale effect

[Young_Tim (Tim Young)]

Hi everyone,
I really love what this designer has done with his project cards (sorry, I can’t share the link yet) : when hovering, the frame height shrinks, and the embedded image zooms out.

I’ve been trying to reproduce this, but I can’t find a way to get the same result. Unfortunately, my image (even though it is wider than the frame) leaves two empty margins on each side.

Here’s what it looks like

I don’t understand why my rounded corners turn back to straight angles during transition and hover state either

Do you know a way to achieve the same result ?

Here’s how the card is built :

Thanks for your help !

---

Here is my public share link: [LINK][1]

[WebflowAIModerator]

Hi there,

For smooth rounded corner transitions on your card element, you’ll need to ensure the transition property is properly set. Here’s how to set it up:

1. Select your card element
2. In Style panel > Selector choose None
3. Add a transition for Border radius under Effects > Transitions

Regarding the image margins, to ensure your images fill their container properly, set the image’s width to 100%. This will maintain proper scaling and prevent unwanted margins. Keep in mind that Webflow automatically creates responsive images based on their normal states, so it’s important to preview your hover interactions across different breakpoints to ensure everything displays correctly.

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

[Young_Tim (Tim Young)]

Hi,
Thank you very much for your answer. So I’ve tried different things but none of them seem to work. Here’s what I did :

• Switched Width and Height to 100% on project-card-image
• Switched Width and Height to 100% on div-image-wrapper

Also tried to do it only on div-image-wrapper, and on project-card-image, with no results.
Do you have any other suggestions ?

Thanks again