Partners/logo element in grey-scale until mouse on

Hi,

I have logos in the partners/logo element in grey-scale until mouse on makes them seen in color. This works fine except in IE. Any ideas for IE?

I used this code for my partner/logo element:

.slide-image {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
}
#top .avia-logo-element-container img { filter: grayscale(100%); -webkit-filter: grayscale(100%); filter: gray; -webkit-transition: all .6s ease; }
#top .avia-logo-element-container img:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); filter: none; }
.avia-content-slider-inner .image-overlay { display: none!important;
}
#after_section_1 .content {
padding-top: 25px;
padding-bottom: 0px;
}