How to get jquery grayscale transform effect to only apply after hover?

Question

I'm trying to create a very specific mouse over effect with grayscale. The transition should be - a set of images that are full color on page load, but when a user hovers over an image, that image remains in color but the other images all turn grayscale. I'm currently accomplishing this by applying a hover effect with grayscale to the div containing all images, then cancelling this effect for the specific image being hovered (using a transform: none or similar).

This is working for the majority of browsers, but I'm having trouble modifying it to work in IE9-10. I'm 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 issue I'm running into in IE9-10 is that on page load, the images are in grayscale rather than color. Other than that it's all working. Would there be a way to modify this script to only show on hover of the surrounding div?

I can't use background images or sprites for this due to a carousel script I'm also using.

For reference, this is the relevant code (in addition to the script linked 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);
}