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

[ureech]

Привет.

<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";

}

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

[Aetae]

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

Если кружок - используй для затемнения 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 и.т.д. тебе в помощь.

[ureech]

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

[Aetae]

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

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

[ureech]

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

[Aetae]

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

[ureech]

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

[ureech]

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

[Aetae]

Ты зачем-то пошёл по альтернативному варианту, хотя он и сложнее. Но ок. Чтоб получить размытый кружок тебе всё также придётся воспользоваться радиальным градиентом как и в моём примере, только теперь как маской: убери 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 - ширина размытия.

[ureech]

Ок. Спасибо.