← All elements
<div class="tg"><i style="--h:12"></i><i style="--h:42"></i><i style="--h:168"></i><i style="--h:200"></i><i style="--h:262"></i><i style="--h:320"></i></div>About this hover effect
A grid of colour tiles where hovering one blurs and shrinks the rest, pulling attention to a single tile.
How it works
Tile colours come from a hue custom property used in hsl. When the grid is hovered, every tile blurs, desaturates and shrinks, then the specific hovered tile overrides those values, grows and gains a glow in its own hue.
Ways to customise it
- Change the --h numbers for new colours.
- Raise the blur from 2px for a stronger effect.
- Use it on image thumbnails.
Good to know
Blurring is purely visual and does not hide the content from assistive technology. Test on touch devices where hover does not exist, since no tile will be highlighted.
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.