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:
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.
8 Comments on Custom Cursors in CSS.
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.
Thank you! I tried to find this cursor over half a hour
Really nice cursor, i like the glass effect.
Thanks, Just looking to play with a cursor, might use the
-moz-zoom-incss trick..Thanks for sharing!
Thank you! I
is very useful for me.
Not working with Firefox. Does not change anything. I don’t understand how it works for someone else here then?!
@Max, let me guess.. Firefox on Mac?