Как такое сверстать?

Question

[vista1x]

Как сверстать такой блок?


Логика такая: при наведении на блок, закрашивается весь контент (кроме фона) в рамках окружности вокруг указателя мыши.
Смотрю в сторону mix-blend-mode, но получается не то что нужно: https://jsfiddle.net/wd31xum8/

Comments

[zkrvndm]

Копните в сторону прозрачных букв, типа чтобы они шли как вырезы на полотне, а под полотном уже можно двигать окруженность с нужным вам цветом.

Answer 1

[Максим]

Answer 2

[Максим Морев]

Я бы в первую очередь куда-то в эту сторону посмотрел.



Со стрелкой правда непонятно что делать, возможно, это чуть ли не единственный случай, когда шрифтовая иконка будет оправдана, но нарисовать и скомпилировать придётся самостоятельно :)

Если бы не хватило - полез бы смотреть в сторону SVG-клипа.
Но в целом случай сложный, придётся заморочиться, чтобы сделать более-менее приятно глазу. :)

Answer 3

[forspamonly2]

режимами наложений такое можно сделать, просто надо понимать как они работают.
в данном случае у вас чёрный текст, для наложения на него цвета вполне подойдёт режим screen.
но чтобы на фоне не было вообще никаких следов накладываемого круга, фон должен быть чисто белым.
поскольку у вас фон элемента серый, можно его сначала покрасить в чисто белый, потом наложить круг, а потом отдельным фильтром затемнить (вместе с наложенным цветным кругом) обратно до серого уровня остального фона.