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), 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.

4 Comments

  1. 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. Thank you! I tried to find this cursor over half a hour :)

  3. Jozo

    Really nice cursor, i like the glass effect.

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

Post a Comment

Your email is never shared. Required fields are marked *

*
*