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.
10 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?
Not working for me on Firefox (PC) – v3.6.3. The IE cursor trick works fine.
The only combination that worked for me was
cursor :url(magnify.cur), -moz-zoom-in;
This tested ok for me on :
Win 7: FF3.6.3,Chrome5DEV, Safari5, IE8
Mac OSX:FF3.6.3, Safari5
Where FF on Mac defaults to the -moz-zoom-in cursor.
Thanks for the .cur file