css - transicion - mostrar texto al pasar el mouse sobre una imagen html

Lupa(zoom) Cursor sobre imagen

Question

Estoy buscando una solución para cambiar el cursor a una lupa al pasar sobre una imagen de Fancybox.

Como en Pinterest, cuando pasas el cursor sobre una imagen (usando Chrome).

Hasta ahora tengo esto que no tiene soporte para varios navegadores.

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

¿Hay una mejor manera de abordar este problema?

Answer 1

Para eso necesitas usar un archivo de cursor .cur y no un archivo .gif , por lo que será como

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

Answer 2

Puedes usar:

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

Answer 3

Según caniuse.com , los navegadores relevantes ahora todos admiten el cursor: zoom-in; excepto IE por supuesto. El uso de IE ha bajado a 6.1% en w3schools ... ¡el reloj está fallando en IE!

.picture img{
   cursor: zoom-in;
}