I’ve seen a couple threads touch close to this, but not exactly what I’m hoping to achieve. I want to build a 4 column wide section, where each column has a hover interaction that grows the selected box, and shrinks the others. E.g. all 4 columns are 25% width without hover, but when a mouse hovers over column a, column a grows to 35% and the rest shrink horizontally to 21%.
What’s the best way to do this?
Here is my public share link: LINK
(how to access public share link)
Without getting into any technical specifics, it sounds to me like this would just take a custom interaction where, for each column, you have an interaction set to 1. grow the column at hand and 2. shrink the other three columns. Duplicate and adjust the interaction for each respective column. Each column would need a unique class.
Hi @H_Barry, we welcome you to the Webflow Community!
@PixelGeek recently did a video on how to do this specifically.
I will link that video here for your reference.
Hopefully this is the direction you are wanting to take? Please lmk if I can help with anything else!
Happy Designing,
Brandon
@QA_Brandon This is exactly what I’ve been searching for. Thank you, and thank you @theecarls for the help!!
hello! This is My My, just a shout out. I am happy to see you here, besides ig, lol! I have a question, don’t know if you can help me.
The tutorial was a breeze to follow! The only thing I now want to do is add a link to each column. Do I have to use a link block and start over or can I input a link somewhere on the div block?
Well with the new feature of the div block right click u can change the whole element to a link block! Hope that helps and puts u in the right direction?!
Lmk
Happy designing,
Brandon