On hover CMS items height increase and other CMS items raw wise blank space issue

Hello,
i want on hover items like this…
link : https://www.canva.com/design/DAFx4Fpemlc/ren5zIcQEdeiujiMqomY6A/watch?utm_content=DAFx4Fpemlc&utm_campaign=designshare&utm_medium=link&utm_source=editor

but when i set in CMS on hover result is there…
link : https://www.canva.com/design/DAFx4PEHKSk/HOUwhjGrlzRSETQP1QWSHQ/watch?utm_content=DAFx4PEHKSk&utm_campaign=designshare&utm_medium=link&utm_source=editor

In CMS items on hover spacing issue how can i fixed it ?
any thoughts ?

Are you talking about the timing?
Instead of doing hover style effect build it as an interaction. Then you can more easily control the easing and slow down the effect to you liking.

no, i am not talking about the timing.
on hover height increase… so, CMS item on hover like raw wise space is here…

link : Docxster

I think you must be talking about the layout of the page then.
You probably have your cards in a grid, which will preserve the row height.
Increase the height of one item, the whole row height increases.

In your other video the layout behaves more like a masonry layout.

Hello,
i have set this view. on hover not proper working display like overlapping issue. can you check it ? what i missing up?
Read only link : Webflow - Docxster

Run link : Docxster

Did you use the JS-based masonry approach or the CSS-based one?

JS-based approaches like Macy calculate and position items at rendertime, so you’d need to dig into the docs to see what your options are for making that update when you resize an item.

The CSS based one is simpler and leverages the browser’s natural layout. I’d use that one for what you’re trying to do here.