Поменять фон части блока
 

Привет.

<div class="wrraper">
<!-- Затемнение для картинки -->
<div class="page"></div>
<!-- Облость вокруг курсора  --->
 <span class="magnify"></span>
<img src="" />
</div>

<style>
.page{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
}
</style>

var magnify = document.querySelector('.magnify');
 document.querySelector(".wrraper").onmousemove = function (e) {
        magnify.style.top = e.clientY * 1 - 300 + "px";
        magnify.style.left = e.clientX * 1 - 300 + "px";

}

Подскажите как мне вокруг курсора убирать затемнение?

Что значит "убирать затемнение вокруг курсора"?
Какой-то кружок оставлять прозрачным? Квадрат? Просто убирать всё затемнение при наведении?

Если кружок - используй для затемнения radial-gradient:

<div class="wrraper">
  <!-- Затемнение для картинки -->
  <div class="overlay"></div>

  <img  src="https://images.unsplash.com/photo-1506610654-064fbba4780c?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MzEwOTcwMDV8&ixlib=rb-4.0.3&q=85" />
</div>

<style>
  .overlay {
    --cicle-radius: 10px;
    pointer-events: none;
    background-image: radial-gradient(
      circle at var(--cicle-radius) var(--cicle-radius), 
      #0000,
      #0000 calc(var(--cicle-radius) - 5px), 
      rgba(0, 0, 0, 0.6) var(--cicle-radius)
    );
    background-position: -99999px;
    background-size: 200% 200%;
    transition: background-position 0.01s;
    position: absolute;
  }
  
  html, body, .wrraper, .overlay {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  img {
     width: 100%;
  }
</style>
<script>
  var cicleRadius = 100;
  var overlay = document.querySelector('.overlay');
  overlay.style.setProperty('--cicle-radius', `${cicleRadius}px`);
  document.querySelector(".wrraper").addEventListener('mousemove', (e) => {
    overlay.style.backgroundPosition = `${e.pageX - cicleRadius}px ${e.pageY - cicleRadius}px`;
  });
</script>

Если какая-то более сложная фигура - то всякие clip-path, mask, mix-blend-mode, filter и.т.д. тебе в помощь.

Убрать затемнение, то есть, есть блок с картинкой.Картинка затемнена другим дивом, поверх первого. Когда курсор на картинке, то там где курсор, вокруг него убрать затемнение. Форма пока не важна. Это уже другой шаг)

В общем и целом "убрать затемнение" не трогая сам элемент который это затемнение обеспечивает - невозможно. Т.е. так как ты хочешь: убрать затемнение .page путём воздействия исключительно на .magnify - нельзя принципиально никак.
Чтоб что-то делать с затемнением - надо это делать именно с самим затемнением. Рабочий пример я привёл, как и написал другие возможные варианты.

Альтернативой может быть не "убирание затемнения", а рисование копии того, что лежит под затемнением. Т.е. в .magnify ты кладёшь точно такую же img как и снизу, обрезаешь и позиционируешь её как тебе надо. Это очень ограниченный в применимости способ, но в данном конкретном случае имеет право на жизнь.

Вот пример на слайдере. С затемнением. Как такое реализовать?

ureech, и чем тебе не нравится тот код, что я тебе привёл? Он делает абсолютно то же самое, разве что края кружка не так размывает(что меняется правкой оной циферки).

Aetae,
да нет, спасибо, я не о том. Я ещё и не кодил) Просто хотел уточнить непонятные мне моменты.

Ну вроде победил я его)
Вот пример с кодом, кому интересно. Только на реальном сайте, нужно учитывать координаты блока при задании координат мыши.
Но вот как размыть очертания круга что то не найти. Вся инфа о масках и тп для css. Как применить для js нужна помощь.

Ты зачем-то пошёл по альтернативному варианту, хотя он и сложнее. Но ок. Чтоб получить размытый кружок тебе всё также придётся воспользоваться радиальным градиентом как и в моём примере, только теперь как маской: убери clip-path и используй

day.style.mask=`radial-gradient(circle at ${x}px ${y}px, rgba(0, 0, 0), rgba(0, 0, 0) 40px, rgb(0, 0, 0, 0) 60px)`;

Разница меж 40px и 60px - ширина размытия.

Ок. Спасибо.

Всё работает. Ещё раз спасибо. Но одна деталь портит триумф) Если фон у фото такой как есть, голубой, то на маске видно очертание круга. Как буд то border. Попробовал на каричневом фоне. там не видно. Не принципиально конечно, но да ладно. На первый раз и так сойдёт)

А как сделать маску с вашим кодом, что в начале дали?