I’m trying to create 2 equal columns (with the culmn block or with to divs). When I hover over the left one, I want it to be 66% width and at the same time the right one has to shrink to 33%.
With a div and relative styling using the pseudo-class :hover I can set the size of the div I hover.
Is it possible to set the other div to another width while hovering the first one? And how can I create it?
Hey @Lijn-B.
This is possible. Either with pure CSS (hover state) or with an interaction (mouseover).
Could you please share your block structure of the 2 columns/divs and also confirm that the desired behavior must only work when hovering the first element and not vice versa?
Thanks.
Hey @Marius,
Thank you for your reply.
The Blockstructure looks like this:
The main Div is Flex with row-direction, the child div’s are flex with column direction.
Vice versa would be nice, but not a must.
On the first child div I have set the relative styling like this:
Thanks!
@Marius it already works.
Some how it didn’t, but I made some changes and now the second div shrinks because of the growth of the first ona. And vice versa. (with relative styling on the second div, the same as the first Div)
With this approach, Relative Styling isn’t necessary.
You can just apply the hover state via the regular pseudo dropdown menu.
But that’s totally up to you, either is 
Hi @Marius, I tought it did work, but not as much as I wanted.
With the block structure as above I want to add an action when I mouse over the first div child.
I want to change the width to 95% and at the same time I want the other child div changed to 100px.
With only relative styling of the default hover the second child div doesn’t shrink far enough.
So I tried to set this up with actions (you made a tutorial once) but I’m not capable enough to recreate it with only this vid and the other tutorials I can find.
Hey @Lijn-B.
You can target the second child when hovering the first child by the following Relative Style.
No interactions required.
Please note that you can’t use this method for your second div.
This would require an interaction or alternatively some tweaking of the flex property.
Let me know if you need help in that regard.
Hi @Marius ,
Thanks a lot again.
I learn a lot here.
1 but… I want it vice versa. That’s why I started with interactions.
Can you give me a clue how to work with them?
Thanks in advance!!
Hey @Lijn-B.
Of course. There are multiple ways to achieve it.
I took the route which probably is the easiest to follow.
This approach is more flexible, as you are not dependent of HTML/block structure, and have full control over styling throughout breakpoints (flex-grow might work well on rows, but has its problems with columns in this use case).
First, you need to add the block class of your first div to your second div as a virtual class.
You can achieve that by pressing Shift + Enter in the Class Modal after entering the class.
The div’s should, as they are working as containers, probably have the same styling, so there isn’t any issue. You can always override things via GUI by using the second div’s block class, if that’s not the case.
One could use an independent class, like “hover-animation”, but we need the actual block class for the Relative Styling due to stylesheet priority reasons.
On your first div, setup interactions as follows:
This adds the class “hover-active” to both of your divs, regardless which one is hovered.
You can now setup a simple Relative Style and target both containers with the default state (not hovered) and the hover state.
Using the free-form rules inside the Relative Styling modal allows you set up only a single rule with the ability to target two different states via the pseudo dropdown menu.
The default Relative Style is set to the width of 5% while the Relative Style on hover is set to 95%.
So as soon as the class “hover-active” gets added to both divs by hovering one div (interaction), both divs get a width of 5% applied. The more specific rule which contains the hover state, and which is only applied by hovering an individual div, will apply a width of 95% to this particular div.
Here is the result:
Please let me know in case you face any issue.
Thanks!
@Marius
Wow! Thanks for the reply.
I’ll look in to it tomorrow. It’s a holyday eve here like Christmas with present like Santa Claus.
Thanks!!
Hi @Marius, thanks for the great tutorial.
This is exactly what I want, so nice!!
Now I thought I understood the interactions.
So on both div’s (first-div and second-div) I added another div with a Header in it.
I gave the first header div the class header-div and added it as virtual class to the second header div.
I added interactions to the first div (not the first header div) like this:
And in it I added (or removed on mouse leave) a visibility-div class:
On the first div (not header) I added another reltive style like this:
With Opacity in it:
But this doesn’t work.
I thought I understood it, but here I’m doing something wrong.
Is it because I added the relative style to the first div while addressing the first header div?
It works when I add the relative style to the first-header-div, but I want it to happen when entering the first div.
Hey @Lijn-B.
Thanks for sharing your feedback. It’s great that your issue could be solved.
Unfortunately, it’s difficult to say what your issue is without a link to a live installation and I couldn’t find any information either what specifically is not working on your end.
Regarding your 2nd scenario, without testing this specific use case, I think it’s not possible as of yet.
I had something similar to build and this might be a current limitation.
I can’t remember the details when I posted this, it’s been too long and since then I avoid nested blocks that each have interactions applied.
