How to make the background animation gather into a circle + change the color of the text?

Question

css

Can you tell me what can be done to accomplish this? I won't be offended if you attach working examples)

Answer 1

The text will have to be duplicated and clipped with clip-path.
Without duplication, you can try to play with mix-blend-mode, but I doubt that there is a suitable blend mode for this case.

Answer 2

In general, it's difficult for the web to manage non-rectangular graphics.
Alternatively, place a round blue round block inside (border-radius 50%) that will be much larger than the parent container and hidden outside its borders, i.e. a rectangle will be visually visible. On hover, a transform: scale is made, and it is reduced to the desired size. Make the background of the parent container gray.
True, it all depends on the animation that you require.
And, this text, so that it is white under the block, and then black. Try this: https://developer.mozilla.org/en-US/docs/Web/CSS/f...