CSS cursor on images

Images get cursor: default by browser. Add zoom-in for clickable galleries or pointer for clickable thumbnails.

Syntax

.gallery-thumb { cursor: pointer; }

When to use

Use pointer for thumbnails that link, zoom-in for click-to-enlarge.

Keyword reference

The CSS property is cursor. The value form covered on this page is img { cursor: zoom-in }. The full grammar accepts a comma-separated list of url() sources followed by a single required keyword fallback. Browsers walk the list left-to-right, use the first source they can render, and fall back to the keyword if all url() sources fail.

Browser support notes

  • Chrome / Edge (Chromium): accepts cursor images up to 128×128. Falls back gracefully on broken URLs.
  • Firefox: caps cursor images at 32×32 unless DPI scaling is in play. Always ship a 32×32 variant for Firefox compatibility.
  • Safari: historically picky about URL-only fallback chains; always include a CSS keyword fallback at the end.
  • Mobile Safari / Chrome on Android: no cursor at all. Wrap custom cursor rules in @media (pointer: fine) to avoid wasted bytes.

Related cursor properties

From keyword to a real cursor pack

If you have decided which CSS cursor value you want and now need a cursor pack to ship behind it, browse the collections page or pick a free CC0 set from the community assets page. The website-cursor tutorial walks through the full deploy.