CSS-Html-JavaScriptNo Comments

default thumbnail

Here is how you can add image in mouse cursor easily using the javascript. Follow this guide step by step.


Just place the html code between <body></body> tag.

<div class="cursor"></div>


.cursor{ pointer-events:none; width:2rem; opacity:0; background-image:url(../img/cursor.png); background-size:100% 100%; background-repeat:no-repeat; backface-visibility:hidden; height:2rem; position:absolute; transform:translate(-50%,-50%); z-index:9999; transition:all 0.2s ease;}


Just place this javascript code in the bottom of the page.

var mouseCursor = document.querySelector(".cursor");


function cursor(e){
	mouseCursor.style.top = e.pageY + 'px';
	mouseCursor.style.left = e.pageX + 'px';
	mouseCursor.style.opacity = 1;

Be the first to post a comment.

Add a comment