How can I make the cursor act as an image mask when moving the mouse?

Question

css

There are 2 pictures (A\B). Picture A is constantly visible, so that when you hover over the cursor, the area around the cursor (let's say a circle of 100x100 px) shows picture B. In graphical terms, you need to fasten the properties of the image mask to the cursor. Thank you!

Answer 1

It is necessary to track the movements of the mouse - and place the DIV code block containing the image at the cursor location. Approximately as when dragging the picture with the mouse - only without pressing the button.
Well, if I understood the problem correctly.

Answer 2

Can be done using jquery.
You need to hang an event on the circle to catch the hover and change the properties of the picture (for example, display)
Or do it in pure css using + or ~ (if there are other elements between the elements)

<div id="a">Div A</div>
<div id="b">Hover me</div>
<div id="c">Div B</div>

#a {
  width: 100px;
  height: 100px;
  background-color: #000;
 z-index: 1;
}
#c {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
}
#b:hover ~ #c {
    display: inline;
}