Changer le texte en survol à l'aide d'un curseur spécial

Question

Veuillez me guider sur la façon de modifier le texte en survol, comme sur le site Web monopo. Je n'ai pas besoin d'un arrière-plan. Un simple effet circulaire (comme un arrière-plan coloré) et des modifications de texte suffisent. De plus, si possible, j'aimerais que l'effet soit actif uniquement dans le div nommé "à propos". Lien de site Web: https://monopo.london/

Answer 1

Voici un exemple simple pour vous aider à démarrer.

Le texte dans "Lens" se trouve dans un élément au-dessus du texte principal. Chaque fois que la souris bouge, elle sera découpée en cercle à la position de la souris. Il a un fond blanc, ce qui donne l'impression qu'il recouvre le texte en dessous.

<style>
  .about {
    position: relative;
    --x: -0;
    --y: -0;
    font-size: 48px;
  }
  
  .overlay {
    position: absolute;
    background: white;
    top: 0;
    left: 0;
    z-index: 1;
    clip-path: circle(1em at var(--x) var(--y));
    color: red;
  }
</style>
<div class="about">
  <div class="underneath">This is some text <br>and some more</div>
  <div class="overlay">Different characters<br>and again more</div>
</div>
<script>
  const about = document.querySelector('.about');
  about.addEventListener('mousemove', function() {
    const x = event.clientX;
    const y = event.clientY;
    about.style.setProperty('--x', x + 'px');
    about.style.setProperty('--y', y + 'px');
  });
</script>