title: CSS change custom cursor image origin (hotspot) to center
body: <p>I want to use a custom image for a cursor.</p>
  
  <p>This is fine, but from what I can see - the origin (tip of arrow) is by default at the top-left point of my image.</p>
  
  <p>How can I set the origin to be the center of my image.</p>
  
  <p>Here is a demo snippet to demonstrate the problem</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    width: 600px;
    height: 100px;
    background: pink;
    cursor: url(http://placehold.it/50x30), auto
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;the cat in the hat&lt;br&gt; the cat in the hat&lt;br&gt; the cat in the hat&lt;br&gt; the cat in the hat&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Notice that when I try to select the text - it selects from the top-left of the image.</p>