Adjusting mouse position with custom cursor

Question

I'm currently experimenting with large custom cursor on hover and I'd like to make the hover a little more accurate. I'd like to center the cursor in the image not to be top left. I'm not sure exactly which method would the be the best, any tips on that ?

Here's a quick example: https://codepen.io/kombolo/pen/MWYpaXj

<div class="el"> Hello World </div>

.el {
  margin-top:100px;
  width: 100vw;
  height:100px;
  font-size:128px;
  text-align:center;
  cursor: url("http://www.tsi.enst.fr/pages/enseignement/ressources/mti/quat_TF/pages-site/images/applic40.jpg"), auto;
}

Thanks

Does this answer your question? [CSS change custom cursor image origin (hotspot) to center](https://stackoverflow.com/questions/19560878/css-change-custom-cursor-image-origin-hotspot-to-center) — Mr. Polywhirl, Dec 19 '19 at 14:40

score 1 · Answer 1 · answered Dec 19 '19 at 14:41

1

You can change the cursor's 'hotspot' position in pixels ( not really sure you can in % )

cursor: url(your image) posX posY, auto;

.el {
  margin-top:100px;
  width: 100vw;
  height:100px;
  font-size:128px;
  text-align:center;
  cursor: url("http://www.tsi.enst.fr/pages/enseignement/ressources/mti/quat_TF/pages-site/images/applic40.jpg") 75 75, auto;
}

<div class="el"> Hello World </div>

answered Dec 19 '19 at 14:41

Mihai T

17,254
2
23
32

Thanks a lot, way more easy than I thought !! – Pickle_Rick Dec 19 '19 at 14:45
@Pickle_Rick Glad i could help. Don;t forget to vote/accept my answer. Also I don't know why i got a downvote. The images seem to be blocked here in the SO snippet. So who downvoted, please state your reasons in a comment. Thanks. – Mihai T Dec 19 '19 at 14:47

Adjusting mouse position with custom cursor

1 Answers1