Loupe (zoom) Curseur sur l'image

Question

Je cherche une solution pour changer le curseur en loupe lors du survol d'une image Fancybox.

Comme sur Pinterest, lorsque vous survolez une image (en utilisant du chrome).

Jusqu'à présent, j'ai ce qui ne prend pas en charge tous les navigateurs.

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

Existe-t-il une meilleure façon d'aborder ce problème?

Answer 1

Pour cela, vous devez utiliser un fichier curseur .cur et pas un .gif fichier, donc ce sera comme

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

Answer 2

Vous pouvez utiliser:

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

Answer 3

Selon caniuse.com , les navigateurs concernés prennent désormais tous en charge cursor: zoom-in;except IE bien sûr. IE l'utilisation est en baisse à 6,1% sur w3schools ... l'horloge est sur IE!

.picture img{
   cursor: zoom-in;
}