Zoom in cursor not working with Magnific Popup

Question

Although I have absolutely zero ability with JavaScript I was able to get the Magnific Popup plugin to work via this jsfiddle from this previous Stack Overflow post. However, the zoom in cursor doesn't appear but rather the hand pointer does. I've tried a few methods but can't seem to get it to work properly. Any solutions on what's missing in the code? (And no, I am not using IE. I'm using Firefox and realize that the zoom in cursor doesn't even work on the Magnific Popup homepage with IE, an issue IE has with CSS3 from what I gather.)

(As well, I did try adding a comment to the original Stack Overflow post, but as I don't have 50 reputation points I was unable to do so and so am creating this new question.)

Thanks in advance.

<a name="nameA">
<div class="nameB">

    <div class="test1">
        <div class="test2">
            <h1>Page Title</h1>

            <a class="image-popup-vertical-fit" href="cat.jpg" title="Caption. Can be aligned it to any side and contain any HTML.">
                <img src="cat.jpg" width="75" height="75">
            </a>
            <a class="image-popup-fit-width" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
                <img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" width="75" height="75">
            </a>
            <a class="image-popup-no-margins" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
                <img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="107" height="75">
            </a>
        </div>
    </div>
</div>

$(document).ready(function () {        
$('.image-popup-vertical-fit').magnificPopup({
    type: 'image',
    delegate: 'a',
    closeOnContentClick: true,
    mainClass: 'mfp-img-mobile',
    image: {
        verticalFit: true
    }
});
$('.parent-container').magnificPopup({
    delegate: 'a', // child items selector, by clicking on it popup will open
    type: 'image'
    // other options
});
$('.image-popup-vertical-fit').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    mainClass: 'mfp-img-mobile',
    image: {
        verticalFit: true
    }

});

$('.image-popup-fit-width').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    image: {
        verticalFit: false
    }
});

$('.image-popup-no-margins').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: false,
    fixedContentPos: true,
    mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from                left and right side
    image: {
        verticalFit: true
    },
    zoom: {
        enabled: true,
        duration: 300 // don't foget to change the duration also in CSS
    }
});    

});

Answer 1

Try to add a CSS snippet like this:

a { cursor: -webkit-zoom-in;  cursor: zoom-in; }