<h1>Hover over the image</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/mountain.jpg" alt="">

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px auto;
  font-family: Helvetica, sans-serif;
  background: #f2f2f2;
}

h1 {
  width: 100%;
  font-size: 24px;
  text-align: center;
  color: #19211f;
}

img {
  border: 2px solid #19211f;
  border-radius: 5px;
  background-color: #ededed;
}

/*icons from https://iconmonstr.com*/
.cursor-prev {
  cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/cursor-prev.cur), auto;
  cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/cursor-prev.svg) 16 16, auto;
}

.cursor-next {
  cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/cursor-next.cur), auto;
  cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/cursor-next.svg) 16 16, auto;
}

window.addEventListener("load", init);

function init() {
  const img = document.querySelector("img");
  const {width} = img.getBoundingClientRect();
  const halfImgWidth = width / 2;

  img.addEventListener("mousemove", function(e) {
    const xPos = e.pageX - img.offsetLeft;
    /*IE11 need this*/
    //this.classList.remove("cursor-prev");
    //this.classList.remove("cursor-next");
    this.classList.remove("cursor-prev", "cursor-next");
    if (xPos > halfImgWidth) {
      this.classList.add("cursor-next");
    } else {
      this.classList.add("cursor-prev");
    }
  });
}