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

i'm trying create specific mouse on effect grayscale. transition should - set of images full color on page load, when user hovers on image, image remains in color other images turn grayscale. i'm accomplishing applying hover effect grayscale div containing images, cancelling effect specific image being hovered (using transform: none or similar).

this working majority of browsers, i'm having trouble modifying work in ie9-10. i'm using script http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js-v2-0-with-browser-feature-detection-using-modernizr/ make cross-browser.

the issue i'm running in ie9-10 on page load, images in grayscale rather color. other it's working. there way modify script show on hover of surrounding div?

i can't use background images or sprites due carousel script i'm using.

for reference, relevant code (in addition 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 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: 0.6s ease;     -moz-transition: 0.6s ease;     -ms-transition: 0.6s ease;     -o-transition: 0.6s ease;     transition: 0.6s ease; } .personalities .grayscale img:hover {     filter: none; /* applies ff + ie */     -webkit-filter: grayscale(0); }