title: Parallax with mouse
body: <p>I'm trying to 'transform' elements, img here when the mouse moves on the page. I have integrated a vanilla code to create this effect and thought I understoond it but it seems I was wrong. The element from the code snippet is the orange square (3.png), but I want to apply this effect on the human pic (2.png) behind aswell and can't figure out how. (here's the full code as I don't rly know what's messed up except for my whole architecture prbly: <a href="https://github.com/KPq66dw8L/b-code-fiverr" rel="nofollow noreferrer">https://github.com/KPq66dw8L/b-code-fiverr</a>)</p>
  <pre><code>&lt;section class=&quot;container bot-container-img&quot;&gt;
  &lt;img class=&quot;layer closeUp&quot; src=&quot;images/1.png&quot; data-speeed=&quot;2&quot; alt=&quot;&quot;&gt;
  &lt;img class=&quot;layer ellipse2&quot; src=&quot;images/2.png&quot; data-speeed=&quot;-5&quot; alt=&quot;&quot;&gt;
  &lt;img class=&quot;layer&quot; src=&quot;images/images/3.png&quot; data-speed=&quot;2&quot; alt=&quot;&quot;&gt; 
  &lt;/section&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.bot-container-img {
      grid-row-start: 3;
      grid-column-start: 1;
      grid-column-end: 3;
      width: 100%;
      height: 100%;
  }
  section {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
  }
  section img {
      position: absolute;
      object-fit: cover;
      width: 100%;
      height: 100%;
  }
  </code></pre>
  <p>JS:</p>
  <pre><code>document.addEventListener(&quot;mousemove&quot;, parallax);
  
  function parallax(e){
      this.querySelectorAll('.layer').forEach(layer =&gt; {
          const speed = layer.getAttribute('data-speed')
  
          const x = (window.innerWidth - e.pageX*speed)/100
          const y = (window.innerHeight - e.pageY*speed)/100
  
          layer.style.transform = `translateX(${x}px) translateY(${y}px)`
      })
  }
  </code></pre>