How to glue flex-child elements to a hover?

[Funkaholik]

sample here
See, when you hover on an element other elements shrinks (err move aside a bit)
but i want them to move closer to hoverable element ..
so hover will have kinda glue/stick effect to others)
so they will move a bit closer not aside

[Funkaholik]

excuse me .. i’m in beast mode right now
and i need those requests badly, but not imidiately off course))

[Paulie_D]

Then you’ll have to set a percentage size.

https://codepen.io/Paulie-D/pen/VKGwBW

[Shikkediel]

Neat, here’s a variation on that:

Link

[Funkaholik]

you almost got it
but i want other elements to move every time you hover on each one of them
not only once
so kinda combine floating effect from here
and glueing effect from your pen

[Shikkediel]

I tried to achieve that but the combination does not seem possible with CSS alone. Paulie’s suggestion was actually the last bit of the puzzle to get anywhere close to what you described. If you remove that line from the style, you’ll see another of those conundrums appear where the space between the items responds to hovering – while you cannot deselect the parent itself because it is needed to change the size. One cannot use any of the child elements for this because there is no way to address the parent from there. I can’t see any approach to “squeeze” the icons together without changing the parent size. Furthermore, hovering over any (but the first) of the icons leaves no room to select all of it’s siblings.

Not to say another member can’t have a surprise in store but I’d be quite surprised here.

[Shikkediel]

You could place invisible elements that are outside of the parent on top of the empty spaces of course. But that’s just messy – both style and calculation wise.

[Funkaholik]

alrighty then i’ll leave it as it was in a pen .. thanx, Edo..)

[Funkaholik]

thanx to you too, Paulie-D.

[Shikkediel]

while you cannot deselect the parent itself

Looks like I figured it out after all:

Demo

Using pointer-events…

[Funkaholik]

ha-ha you got it now)

[Funkaholik]

almost actualy))
when you hover over any element the rest are glued to a middle element not the hovered one
Just bringing clarity here don’t kill me))

[Shikkediel]

That would require different behaviour for each icon. Either related to changing something on the parent or all of it’s siblings. Don’t think it can be done with CSS.

Theoretically, changing the margin: auto of the parent to either a margin-left: auto or margin-right: auto will get the effect a bit closer but I can’t see how to implement that by hovering over the particular children.

I don’t know about further flexbox tricks though. Haven’t had much exercise with that.

[Author]

Posts