Custom Cursors in CSS
Posted on November 6th, 2006 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:

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.


3 Responses
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.