<div class="cursor"><img src="https://www.evoworx.co.jp/wp2/wp-content/themes/evoworx2017/common/image/dog_red.png" alt=""></div>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  position: relative;
  cursor: none;
}

.cursor {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0; 
  z-index: 1001;
  cursor: none;
  posinter-events: none;
  
  img {
    width: 100%;
  }
}
var
cursor = $(".cursor"),
cWidth = 20, //カーソルの大きさ
mouseX = 0, //マウスのX座標
mouseY = 0; //マウスのY座標

$(document).on('mousemove', function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
  cursor.css({
    //カーソルの真ん中に座標軸が来るよう、
    //カーソルの大きさの半分を引きます
    left: mouseX - (cWidth / 2),
    top: mouseY - (cWidth / 2)
  })
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-3.3.1.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js