Q:

JS-скрипт, позволяющий задать прозрачность фону в области курсора

Уважаемые пользователи!
Есть два DIV-блока с фонами. Один - ночной, он расположен поверх дневного. Нужно сделать так, чтобы при наведении курсора на любую область фона, у него(.night) в этой области задавалось свойство: background(0,0,0,0), при чём, чтобы можно было настраивать свойства этой области.
CodePen
Я смог только сделать так:
.night:hover {
background(0,0,0,0)
}

Что скрывало весь ночной фон. Но как сделать так, чтобы скрывало только область курсора? Благодарю за помощь! :)

A:

Если я правильно понял, то нужно, чтобы "просвечивалась" какая-то область вокруг курсора? Если да, то можно поменять местами картинки, день сделать сверху и при помощи свойства clip-path показывать только нужную его область, изменяя её в зависимости от положения курсора.

const dayElement = document.querySelector('.day');

document.addEventListener('mousemove', (evt) => {
  dayElement.style.clipPath = `circle(50px at ${evt.x}px ${evt.y}px)`;
});
*{
  padding: 0;
  margin: 0;
}

.night {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url('https://i.imgur.com/ufsi8Ae.jpg');
  background-size: cover;
}
.day {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url('https://i.imgur.com/DP4XCIV.jpg');
  background-size: cover;
  z-index: 1;
  clip-path: circle(0 at 0 0);
}

.content{
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
  color: #fff;
  padding: 30px;
  box-sizing: border-box;
}

h1{
  margin-bottom: 20px;
}
<div class="night"></div>
<div class="day"></div>
<div class="content">
  <h1>header content</h1>
  <p>text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content text content</p>
</div>

