Lay Theme Forum

Ah thanks, I'll try that!

I am using Google Chrome, by the way.

Hi @mariusjopen
Sure, here you go http://test.girlpunk.de/
Thanks!

Hey everybody,
on my website I want to use a custom cursor (small illustration) and another custom one for the mouseover effect. The problem is, if I use .png (1x and 2x for retina), the cursor image is sharp but I am unable to set the hotspot coordinates to the center. No matter what coordinates I type in, the center stays in the top left corner of the cursor and it sort of "jumps" everytime it hovers over a link.

body {
cursor: url(http://test.de/image1.png) 35 35, auto;
cursor: -webkit-image-set
        (url(http://test.de/image1.png) 1x,
         url(http://test.de/image1.png) 2x ), auto;
}

a {
cursor: url(http://test.de/image2.png) 30 30, auto !important;
cursor: -webkit-image-set
        (url(http://test.de/image2.png) 1x,
         url(http://test.de/image2.png) 2x ), auto !important;
}

If I use .svg, the hotspot coordinates are in the center but the cursor image appears blurry although the .svg contains fixed width and height (not responsive).

body {
cursor: url(http://test.de/image1.svg) 35 35, auto;
}

a {
cursor: url(http://test.de/image2.svg) 30 30, auto !important;
}

Does anyone know how to fix this?