Lupe (Zoom) Cursor über Bild

Question

Ich suche nach einer Lösung, um den Mauszeiger über einem Fancybox-Bild zu einer Lupe zu bewegen.

Wie auf Pinterest, wenn Sie ein Bild (mit Chrom) schweben.

Bisher habe ich diese, die keine Cross-Browser-Unterstützung hat.

.picture img { 
    cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in; 
} 

Gibt es eine bessere Möglichkeit, dieses Problem anzugehen?

Answer 1

Dafür benötigen Sie eine Cursor-Datei .cur verwenden und nicht eine .gif Datei, so wird es sein, wie

.picture img { 
    cursor:url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in; 
} 

Answer 2

Sie verwenden können:

.picture img{ 
    cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in; 
    cursor: zoom-in; 
} 

Answer 3

zu caniuse.com Nach dem relevante Browser unterstützen jetzt alle cursor: zoom-in; außer IE natürlich. IE-Nutzung ist auf 6,1% auf w3schools ... Uhr ist a'ticking IE!

.picture img{ 
    cursor: zoom-in; 
}