Skip to content
EDU.XLSX

Blur Effect

Point at one button and the others blur, so your eye goes straight to it.

Interface detail, 2024

Blur Effect test page with the Learn More, Our Services and Contact buttons, all sharp. Cursor on Learn More: that button grows and the other two blur. Cursor on Our Services: that button grows and the other two blur. Cursor on Contact: that button grows and the other two blur.

Captures of the repository's test page, with a real cursor.

What it's for

Small details show care. The challenge was to highlight the right option without making the page any heavier.

What I did

An effect made with just HTML and CSS, no extra code. The demo on this page is the real effect in action: hover or tap it.

Details

Type
Interface detail
Year
2024
Status
Open source · code snippet
Made with
HTML and CSS.

Code

See it on GitHub (opens in a new tab)

In practice

Recording of the Blur Effect running from the repository's code: the cursor passes over the three buttons and the others blur.
Running right here, with the project's own code. Hover over or tap a button.
.btns:hover .btn:not(:hover) {
  transform: scale(0.8);
  opacity: 0.8;
  filter: blur(4px);
}