jQuery hover issue on second function (mouseout)

Question

Having an issue with .hover() on mouse'ing out. Doesn't seem to work. It works on the fade in, but not out. I am basically fading in another image on top of it. The 'clone' has a lower z-index to start, and I bring it forward and then fade it in on hover. Both images are stacked.

The fiddle: http://jsfiddle.net/C6AfM/

The JavaScript:

$.fn.hoverImage = function() {
    //add event handler for each image (otherwise it will add the same event handler for all images all at once)
    this.each(function() {
        var img = $(this);
        var magnifyImage = img.next();

        //hover: first function is for mouseover, second is on mouseout
        img.hover(function() {
            magnifyImage.css("z-index", 2).animate({
                opacity:0.8         
            }, 200);
        }, function() {
            magnifyImage.css("z-index", -200).animate({
                       opacity:0
                    }, 200);
        });
    });
}

The HTML:

<span class="img-span">                                
    <img src="(url)" class="project-img">                                                                    
    <img src="(url)" class="project-img-clone">                                                                    
    <figcaption>Caption</figcaption>
</span>

The CSS:

.img-span {
    width:27.08333333333333%; /* 260 / 960 */
    margin-right:3.009259259259259%; /* 26 / 864 */
    display:inline-block;
    vertical-align: top; 
    position:relative;
}

.project-img {
    max-width:100%;
}

.project-img-clone {
    position:absolute;
    top:0;
    left:0;
    max-width: 100%;
    z-index:-200;
    opacity:0;
}

Answer 1

The problem is since the clone is appearing the mouseleave is not firing in the original image, it is fired by the clone

$.fn.hoverImage = function() {
    //add event handler for each image (otherwise it will add the same event handler for all images all at once)
    this.each(function() {
        var img = $(this);
        var magnifyImage = img.next();
        console.log(magnifyImage);

        //hover: first function is for mouseover, second is on mouseout
        img.add(magnifyImage).hover(function() {
            magnifyImage.css("z-index", 2).animate({
                opacity:0.8         
            }, 200);
        }, function() {
            magnifyImage.css('opacity', 0);
        });
    });
}

Demo: Fiddle

---

Or use the pointer-events - IE9+

.project-img-clone {
    position:absolute;
    top:0;
    left:0;
    max-width: 100%;
    z-index:-200;
    opacity:0;
    pointer-events: none;
}

Demo: Fiddle