Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Magnifying Glass (zoom) Cursor over image

I'm looking for a solution to change the cursor to a magnifying glass upon hovering over a Fancybox image.

Like on Pinterest, when you hover an image (using chrome).

So far I have this which doesn't have cross-browser support.

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

Is there a better way to approach this problem?

like image 839
Delos Chang Avatar asked Nov 01 '12 06:11

Delos Chang


People also ask

How do I turn on the cursor Magnifier?

If your mouse does not have a wheel, hold the Windows key and + (plus) or - (minus) to increase or decrease magnification. The Magnifier keeps your settings between each use. For example, if you close the Magnify window at a high magnification level, it will open at that same level the next time that you use it.

How do I add a Magnifier to a photo?

Tap the three-dot Menu button found in the top-right corner of the screen. From the share sheet, select the “Markup” option. Now, tap the “+” button and choose the “Magnifier” option. You'll now see a magnifying circle in the middle of the image.

How do I turn off screen magnification?

Tap anywhere on the screen, except the keyboard or navigation bar. Drag 2 fingers to move around the screen. Pinch with 2 fingers to adjust zoom. To stop magnification, use your magnification shortcut again.

How do you Magnify a picture with glass?

To create image magnifier glass , you must add attribute data-magnifier-mode="glass" . You can use attribute data-lens-type to set type of magnifier lens . To set circle magnifier lens, use value circle . To change size of the lens, use attribute data-lens-size .


1 Answers

You can use:

.picture img{     cursor: -moz-zoom-in;      cursor: -webkit-zoom-in;      cursor: zoom-in; } 
like image 82
mezod Avatar answered Sep 21 '22 19:09

mezod