Make Masonry Blog pictures show up grey scaled

Hello,
I want these pictures to show up grey unless hovered over. In a post I found here (allready closed) I saw the code below. This code does work in Firefox but not in Internet Explorer:

.av-masonry-image-container {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
.av-masonry-image-container:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
}