Question

I’m looking for a solution to change the cursor to a magnifying glass upon hovering over a Fancybox image.

Like on Pinterest, when you hover an image (using chrome).

So far I have this which doesn’t have cross-browser support.

.picture img {
    cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}

Is there a better way to approach this problem?

Answer 1

For that you need to use a cursor file .cur and not a .gif file, so it will be like

.picture img {
    cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in;
}

---

The above is when you wish to use a custom cursor using .cur file. If you are ok with the default cursor provided by the browsers, you could simply use the below.

cursor: zoom-in;