Hovering over the container div shows the hidden div. When the cursor is placed on top of the hidden div, the container div changing behavior is

I am using this plugin for cross-browser grayscale images. Basically, the image is initially rendered in black and white with low opacity. When the user hovers over the image, the grayscale fades to color, the opacity returns to 1, and the previously hidden div slides off the bottom.

This all works great, however, here's the problem: while the user hovers over the image, if the cursor moves to the previously hidden div ( .post-info

), the image reverts to grayscale. I would like to leave it in color if possible. Also, if there is a more elegant, cross-browser, mobile-friendly way to achieve this, please feel free to share. I always try to learn to program more elegantly.

Fiddle: http://jsfiddle.net/zg0jf2fb/

Html

<article>
    <div class="post-info" style="display: none;">
        <h1 class="entry-title"><a href="/" rel="bookmark">Test</a></h1>
    </div>
    <img width="375" height="375" src="http://i.imgur.com/5Boucbt.jpg" class="grayscale grayscale-fade wp-post-image">
</article>

      

        
        
        
      

    

CSS

article {
    float: left;
    opacity: .3;
    position: relative;
    width: 375px;
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
}
article:hover {
    cursor: pointer;
    opacity: 1;
}
article .post-info {
    background: #000;
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1;
}

/* Grayscale CSS */
.grayscale {
    /* Firefox 10+, Firefox on Android */
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");

    /* IE 6-9 */
    filter: gray;

    /*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
    */
    -webkit-filter: grayscale(100%);
}

.grayscale.grayscale-fade {
    -webkit-transition: -webkit-filter .2s;
}

.grayscale.grayscale-off,
.grayscale.grayscale-fade:hover {
    -webkit-filter: grayscale(0%);
    filter: none;
}

.grayscale.grayscale-replaced {
    filter: none;
    -webkit-filter: none;
}

.grayscale.grayscale-replaced > svg {
    opacity: 1;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}

.grayscale.grayscale-replaced.grayscale-off > svg,
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
    opacity: 0;
}

      

        
        
        
      

    

Js

// Hover titles
$('article').hover( function() {
    $(this).find('.post-info').stop().slideDown(100);
    }, function() {
    $(this).find('.post-info').stop().slideUp(100);
});