How to get jQuery grayscale broadcast effect to apply only on hover?

I am trying to create a very specific mouse effect with a grayscale effect. The transition should be - a set of images that are full color on page load, but when the user hovers over the image, that image remains in color, and the other images are all shades of gray. Currently I accomplish this by applying a grayscale hover effect to a div containing all the images, and then canceling that effect to hover a specific image (using a transform: none or similar).

This works for most browsers, but I am having a hard time changing it to work in IE9-10. I am using this script http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js-v2-0-with-browser-feature-detection-using-modernizr/ to make it cross browser.

The problem I'm running into in IE9-10 is that when the page loads, the images are displayed in grayscale and not in color. Besides, everything works. Was there a way to change this script to only show when the surrounding div is hovered over?

I cannot use background images or sprites for this because of the carousel script I also use.

For reference, this is the relevant code (in addition to the script above):

<div id="personalities" class="personalities">
    <div id="person-ebanking">
        <a href="#ebanking" id="link-ebanking" class="grayscale"><img src="images/personalities-ebanking.png" width="204" height="590" alt="eBanking" id="img-ebanking" /></a>
    </div>
    <div id="person-emobile">
        <a href="#emobile" id="link-emobile" class="grayscale"><img src="images/personalities-emobile.png" width="180" height="590" alt="eMobile"  id="img-emobile"/></a>
    </div>
    <div id="person-edeposits">
        <a href="#edeposits" id="link-edeposits" class="grayscale"><img src="images/personalities-edeposit.png" width="204" height="590" alt="eDeposit" id="img-edeposits"/></a>
    </div>
    <div id="person-epay">
        <a href="#epay" id="link-epay" class="grayscale"><img src="images/personalities-epay.png" width="176" height="590" alt="ePay" id="img-epay"/></a>
    </div>
    <div id="person-estatements">
        <a href="#estatements" id="link-estatements" class="grayscale"><img src="images/personalities-estatements.png" width="234" height="590" alt="eStatements" id="img-estatements"/></a>
    </div>
</div>

      

        
        
        
      

    

and css:

.personalities:hover .grayscale img {
    -webkit-filter: grayscale(100%); /* Webkit Nightlies & Google Chrome Canary */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    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"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE8-9 */
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}
.personalities .grayscale img:hover {
    filter: none; /* Applies to FF + IE */
    -webkit-filter: grayscale(0);
}