How to make an item in a flexbox container to expand on hover to 2 columns without moving/affecting the remaining items?

Question

I'm trying to recreate this interaction on Webflow. expected result

So far, I have been successful in recreating this

Everything works fine, except that the third column item on each row moves down to the next row on hover which ends up creating this blinking effect current result

How can I prevent this blinking from happening and instead just have the item in the 3rd column expand on hover on the same row?

Answer 1

from as much i understand from your statement, first i found that after hovering on card it's not growing smoothly so you need to apply interaction on that so hover effect will look soomth. then add overflow on the row after hovering on 3rd card i will not expand over the right hand section (after hovering on 3rd card make first card hide)