Question:
[How to achieve the hover animation which is created by Wix Studio team on this website section 3… where the column expends horizontally? please see the attached website links
I love this section 
Hopefully I can provide some insights that will point you in the right direction 
To answer right from the top - no, this isn’t out of the box functionality, and yes, will likely require code, and CSS to achieve.
Here’s how the team did it:
- They have a flexbox the width of the viewport, all equally spaced, with their inner content. Using CSS, each flexbox item starts with a default flex value of 1 (
flex: 1) - On mouse in/out, the flex value for the item is changed to something like
flex: 3 - Apply a transition for all properties with CSS (
transition: all 700ms cubic-bezier(0.215, 0.61, 0.355, 1);
There’s additional CSS and code required for the animations within each item, but this should help point you in the right direction when it comes to the expanding columns