Показать сообщение отдельно
  #2 (permalink)  
Старый 10.11.2024, 19:57
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,590

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

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