Cursor point to left bottom corner

Question

div{
    width:200px; height:200px; background:red;
    cursor:url(images/eyedropper.png) 25 25, auto;
}


<div></div>

enter image description here

I have an eyedropper image for cursor like above

my problem is this image point to left bottom corner, but cursor default is point to left top corner. Is any way to change pointer to left bottom or move background image?

you can change its direction in photoshop if it is not that neccesary — himanshu, Sep 20 '14 at 07:32
possible duplicate of [CSS change custom cursor image origin (hotspot) to center](http://stackoverflow.com/questions/19560878/css-change-custom-cursor-image-origin-hotspot-to-center) — Niels Keurentjes, Sep 20 '14 at 07:47

himanshu · Accepted Answer · 2014-09-20T07:44:31.067

0

you can change its direction in photoshop if it is not that neccesary if you want to change direction use transform rotate and set deg according to your need

  div{
        width:200px; height:200px; background:red;
        position:relative;
    }
.cursor{ position:absolute;cursor:url(images/eyedropper.png) 25 25, auto;
            transform: rotate(90deg);}

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

edited Sep 20 '14 at 07:44

answered Sep 20 '14 at 07:33

himanshu

1,732
1
11
12

transform will rotate all my content inside of div :( – Ben Sep 20 '14 at 07:38
try to make cursor in another div and put it absolute – himanshu Sep 20 '14 at 07:41

score 0 · Answer 2 · answered Sep 20 '14 at 08:06

the best way to do this via CSS is the resize property.

http://www.w3schools.com/cssref/pr_class_cursor.asp

If I understood you right, you would have to add

nw-resize;

to your cursor selector. You can try all of the said resize functions to get your desired effect.

Cursor point to left bottom corner

2 Answers2