A CSS-only elastic hover effect, because why not?

[css@front-end.social]

A CSS-only elastic hover effect, because why not?

https://css-tip.com/elastic-hover/

A chrome-only experiment using shape(), sibling-index(), linear(), etc.

#CSS #HTML

[kizu@front-end.social]

@css nice! would be even better with the directional hover! https://kizu.dev/multi-directional-hover/

[css@front-end.social]

@kizu yes, good idea. Will try another implementation 😉

[kizu@front-end.social]

@css I imagine today, almost 14 years later after that experiment, it could be easier to achieve :D

[css@front-end.social]

@kizu maybe not. Looks like we always need many "elements" to catch different hover but I will see If I can avoid adding more elements to my existing markup.

[css@front-end.social]

@kizu kind of doable: https://codepen.io/t_afif/pen/xbOzxyp/955a11790fe0de9c7428c98b9fc1f0ad but I need to clean the code a little.

[css@front-end.social]

A direction-aware and more realistic version.

Demo: https://codepen.io/t_afif/full/xbOzxyp via @codepen

#CSS #HTML

[nicksherman@typo.social]

@css @pixelambacht Ok now I definitely need to try this out with the Shop Sans Curve variable font and animate its curvature axis along with the bouncy baseline.
https://www.futurefonts.com/hex/shop-sans

[pixelambacht@typo.social]

@nicksherman @css A match made in heaven!

[phlp@troet.cafe]

works on my iPad as well 🤯(safari and no real hover)

[florianboegner@mastodon.social]

@css Super nice effect! Which part is Chrome only? Safari seems to support all relevant parts as well.

[css@front-end.social]

@florianboegner I cannot test with Safari so I don't know. If it works there, then good.