Как добиться такого эффекта при наведении?

Question

[valgerofficial]

Доброго времени суток! на данном сайте (Не реклама). В меню имеется эффект наведения.. что то похожее как в Windows 10. Частичное изменение цвета border'a. Подскажите как можно реализовать подобный эффект? (Пример ниже на картинке)

Answer 1

[Виталий Першин]

Интересная задача. В общем весь фокус в том, что поверх видимых карточек, лежит точно такая же сетка с невидимыми карточками у которых есть только синий border. На сетку, которая лежит сверху, наложена маска:

mask: radial-gradient(320px 320px at var(--x) var(--y), black 1%, transparent 40%);

То есть у всего блока с синими border остается видимым только радиальный градиент в 320px, а x и y это координаты курсора. Ну и грубо говоря получается такая картина:

Comments

[Kentavr16]

очень крутое решение. минимум ресурсов максимум красоты.

[Ratenti]

А плагин есть специальный?

[valgerofficial]

Ratenti, Если найдете. Скажите мне.

[Виталий Першин]

Ratenti, Сомневаюсь. Чтобы это работало нужно определенные условия соблюдать. Проще самому сделать