Custom Cursors in CSS

Well, on one of the forums that I visit regularly someone posted asking if it was possible to change the default mouse cursor into a magnifying glass — to indicate that the user can zoom in on the image, in this particular case — rather than whatever the browser normally uses.

It is possible using standard CSS but the results are somewhat limited: I only got it to work in Firefox and IE on my computer (Windows). But since those browsers account for probably 90% of visitors, and the change is really only a handy little cosmetic one to aid visitors, it’s worth sharing how to do it!

It all simply comes down to the cursor property in CSS.

What to use:

img.zoomable { cursor: url(magnify.cur), -moz-zoom-in, pointer; }

Example:
Magnifying glass cursor over image

If you want to download the special magnify.cur file that I created for this example, then feel free: download magnify.cur

I hope that helped the person on the forums, even just a little bit.

Previous
Next

8 Comments on Custom Cursors in CSS.

Add your two pennies, others have already donated theirs.

  1. Flash
    Feb 19 2007 at 15:52 UTC

    Just what the doctor ordered! I’ve downloaded your cursor (nice). I’ll have to decide which I like better, mine (http://ameliasloft.com) or yours. Thanks for this resource.

  2. Alexander
    Mar 4 2008 at 08:04 UTC

    Thank you! I tried to find this cursor over half a hour :)

  3. Jozo
    Jozo
    Oct 24 2008 at 15:00 UTC

    Really nice cursor, i like the glass effect.

  4. WP Cult
    Dec 10 2008 at 01:08 UTC

    Thanks, Just looking to play with a cursor, might use the -moz-zoom-in css trick..

  5. goldy
    goldy
    Mar 10 2009 at 23:37 UTC

    Thanks for sharing!

  6. tibipop
    Sep 22 2009 at 06:52 UTC

    Thank you! I
    is very useful for me.

  7. Max
    Jan 15 2010 at 09:27 UTC

    Not working with Firefox. Does not change anything. I don’t understand how it works for someone else here then?!

  8. Peter
    Jan 15 2010 at 10:38 UTC

    @Max, let me guess.. Firefox on Mac?

Post Comment