title: How to remove the ghost image of a PNG? (or the white backgorund of the ghost image)
body: <p>I am a Beginner Developer and am working on a personal chess project.
  I just learned how to create a drag and drop system, maybe I could learn other ways of doing It but I would like to know if there's any way to 'remove' the white background.
  I don't know really how this should work but I had some ideas:</p>
  <ol>
  <li><p>Somehow remove the white background of the ghost image.</p>
  </li>
  <li><p>Substitute the ghost image with the actual image being dragged.</p>
  </li>
  <li><p>Or just entirely remove the ghost image while dragging since we can see the piece in each square when you are dragging over it.</p>
  </li>
  </ol>
  <p>If it's possible to do any of these solutions it would be good!</p>
  <p>Here is the link for the project I am working: <a href="https://codepen.io/ThalisonAmaral/full/qBYZmZq" rel="nofollow noreferrer">https://codepen.io/ThalisonAmaral/full/qBYZmZq</a>
  You will be probably dealing with the function dragstart();
  `</p>
  <pre><code> function dragstart() {
          squaresDrop.forEach(square =&gt; square.classList.add('highlight'))
          this.classList.add('is-dragging');  
      }
  </code></pre>
  <p>`</p>
  <p>The Drag and Drop is at the end of the Js Code</p>
  <p>Since I don't understand what I am dealing with exactly.
  I searched for some possible solutions but I couldn't get any result with
  DataTransfer.setDragImage().</p>
  <p>Which I think it should be using for replacing the ghost image with an actual image but I would need to check each piece, It doesn't seem to be the way but I could be wrong.</p>