CSS Grayscale Filter Won't Work on IE11

Hey all,

I'm having a hard time getting a section of code to work properly for Internet Explorer 11. Here is the code below:

#collection-553955fce4b0147a4ad80062 .sqs-block.image-block {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: grayscale(100%);
}
#collection-553955fce4b0147a4ad80062 .sqs-block.image-block:hover {
 -webkit-filter: grayscale(0%);
 -moz-filter: grayscale(0%);
 -ms-filter: grayscale(0%);
 -o-filter: grayscale(0%);
 filter: grayscale(0%);
}

What I'm trying to do is target a specific area of the page to have the pics show in black and white, but then change to color when you hover over them. It works just fine when I pull the page up in Google Chome but not with Internet Explorer 11. Anyone have a suggestion?

There are only 4 images. How do I upload the two versions and input code to change on hover?

Awesome! I really appreciate it!

There are 4 "portals" on my home page. It's an index page. Here are the links:

Home Page

https://energy-weldfab.squarespace.com/

Page with Portals in Color

https://energy-weldfab.squarespace.com/portals

Page with Portals in B&W

https://energy-weldfab.squarespace.com/config#/pages|/bw-portals

You can also just let IE not have this feature.

The hover CSS may actually be a better solution anyways. It would be nice to be able to choose different pictures in addition to just changing from color to grayscale.

Hi ,

I dont want the hover function how to remove it.