Фоновая картинка (параллакса) при движении курсора прыгает, как это исправить в скрипте?

У меня фоновая картинка (параллакса) при движении курсора прыгает потому что курсор заходит на другие блоки которые сверху фоновой картинки.

В этом же скрипте, надо сделать как-то так чтобы курсор не видел другие блоки относительно параллакса и картинка не прыгала.

Прописать в стилях например transition: 0.2s; для плавного скачка или другие костыли, не подходит.

Помогите, пожалуйста, кто знает как это сделать, с готовым решением, буду очень благодарен.

Вот пример с тем же скриптом (при наведении на блок с текстом, фоновая картинка прыгает):

html

 <div  class="module" style="padding: 200px">
  <div class="module-novis">Text</div>
</div>

css

* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}
.module {
  background: url(https://www.google.com.ua/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) no-repeat;
  background-size: 400px;
  background-position: var(--x ) var(--y) ;
}
.module-novis{
    font-size: 70px; 
    padding:10px; 
    text-align: center; 
    background: #cccc ;
}

js

const el = document.querySelector(".module");

el.addEventListener("mousemove", (e) => {
  el.style.setProperty('--x', -e.offsetX / 100 + 60 + "%");
  el.style.setProperty('--y', -e.offsetY / 50 + 60 + "%");
});