← All elements
<div class="er"><span>👍</span><span>❤️</span><span>😂</span><span>😮</span><span>🎉</span></div>About this hover effect
A row of reactions where the hovered one swells and its neighbours grow slightly, using :has() and sibling selectors.
How it works
Each emoji scales on hover using transform-origin at its bottom edge. The :has selector finds the item just before the hovered one and the adjacent sibling selector finds the one after it, so both neighbours grow a little, creating a dock-like falloff.
Ways to customise it
- Change the 1.7 scale for a stronger swell.
- Swap in your own emoji or icons.
- Add a third neighbour step with another sibling selector.
Good to know
Make each reaction a button with an accessible name before using it for real. :has is supported in all current browsers; without it only the hovered item would grow.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.