Jump to content

CSS Grayscale Filter Won't Work on IE11

Recommended Posts

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?

Link to comment
  • Replies 3
  • Views 38.4k
  • Created
  • Last Reply

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.

Link to comment
  • 10 months later...


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.