Увеличительное стекло (увеличение) Курсор над изображением

Я ищу решение для изменения курсора на увеличительное стекло при наведении на изображение Fancybox.

Как на Pinterest, когда вы наводите изображение (используя хром).

Пока у меня есть это, у которого нет поддержки кросс-браузера.

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

Есть ли лучший способ подойти к этой проблеме?

Ответы

Ответ 1

Для этого вам нужно использовать файл курсора .cur, а не файл ~~.gif~~, поэтому он будет похож на

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

Ответ 2

Вы можете использовать:

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

Ответ 3

Согласно caniuse.com, соответствующие браузеры теперь поддерживают cursor: zoom-in;, за исключением IE, конечно. Использование IE до 6.1% на w3schools... clock a'ticking IE!

.picture img{
   cursor: zoom-in;
}