M
M
Mariana Marianova2018-07-30 13:42:02
css
Mariana Marianova, 2018-07-30 13:42:02

How to make a hover effect like in Windows 10?

How to make such an effect when hovering over blocks like in Windows 10 joxi.ru/12Mp6ezFMvPKxm?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
I
Ivan Bogachev, 2018-07-30
@idmarishik

1. A set of elements with borders (blocks-flex-grids to taste).
2. Absolutely positioned top element at 200vh/200vw with a background in the form of a radial gradient from transparent to the background color of body or whatever is underneath.
3. In the above elements, we set the z-index for the texts and they fall on top of the gradient.
4. Attach a handler to the mousemove event that changes the coordinates of the gradient.
We get something like this:
5b5f2943a7553328112612.pngcodepen
PS: And in the future, insert pictures here, and not on the left hosting.

P
profesor08, 2018-07-30
@profesor08

Making a grid background. You make a big picture with a hole in the center. You position this image on top of the grid so that the center of the hole is where the cursor is.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question