@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)
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.
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.
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.
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:
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.