How to increase size of custom cursor image?

Question

I want to increase a size of image which is used as cursor.

Currently i am not able to put image more than 128 by 128.

But i want to put it with more size.

so how to do that?

I am using

cursor: url(hand.png), auto;

Answer 1

You can combine css + jQuery if necessary, even if combining them is not always perfect:

JSFiddle example:

http://jsfiddle.net/n4Zbr/258/

Local example:

$(function(){
  var $cursor = $('#huge-cursor');
  $(document).bind('mousemove',function(e){
    $cursor.css({
      left: e.clientX - 15,
      top:  e.clientY - 15,
    });
  });
});

body, html {
  width: 100%;
  height: 100%;
  margin:0; padding:0;
  cursor: url("data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"), auto;
}
#huge-cursor {
  position: fixed;
  border-radius: 10% 90% 50% 50% / 10% 50% 50% 90%;
  background: yellow;
  width: 200px; height: 200px;
  border: 4px solid pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="huge-cursor"></div>
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT