Фокус элементов без JavaScript!

В интерфейсах с линейными списками важно быстро направлять внимание пользователя. Один из приёмов — приглушать все элементы, кроме активного.

Как работает:

• контейнер управляет состоянием через :hover;

• все элементы получают сниженный opacity;

• активный элемент переопределяет это состояние;

• transform усиливает ощущение глубины.

Так можно управлять вниманием в списках и панелях без сложной логики.

Code Ready | #фишка