Что значит "убирать затемнение вокруг курсора"?
Какой-то кружок оставлять прозрачным? Квадрат? Просто убирать всё затемнение при наведении?
Если кружок -
используй для затемнения 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 и.т.д. тебе в помощь.