CSS code on Squarespace not working for IE/Firefox

[bchau]

I'm setting up a Squarespace page (Avenue Template) for a client of mine. My client requested that the thumbnails on the Index (gallery) pages be b&w and change to color when you hover over the thumbnail with your mouse. To implement this for specific pages and not site wide, you put the code into Page Header Code Injection on the settings for the page you want it to work on (Index page).

 

I had a few issues getting it to work, but i got some help from a awesome guy on answers.squarespace (forum). I finally got it to work yesterday and it did exactly what i wanted. The issue is it works when viewed on Chrome & Safari, but not Firefox & IE, which is an issue. If i view the page on Firefox/IE, the thumbnails aren't showing, they'll show up if i hover over them.

 

Here is the code i'm currently using:

#projectThumbs .project .project-image .intrinsic div img {filter: url("data:image/svg+xml;utf8,<svg%20xmlns = 'http://www.w3.org/2000/svg'><filte…200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");filter: gray;filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);}#projectThumbs .project .project-image .intrinsic:hover img {filter: grayscale(0%);-webkit-filter: grayscale(0%);filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");}

The page i'm referring to, it'll show properly if you use Chrome/Safari.

 

What changes do i need to make?

 

Attached are some screenshots of the issue.

 

Edited August 22, 2014 by bchau

[dsonesuk]

your filter code is incorrect, its gone a bit askew here

 

filter: url("data:image/svg+xml;utf8,<svg%20xmlns = 'http://www.w3.org/2000/svg'><filte…200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");

 

this works for firefox

url("data:image/svg+xml;utf8,<svg xmlns = 'http://www.w3.org/2000/svg'><filter id='greyscale'><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>#greyscale")

Apparently this wont work for IE10+, now that's a shocker, NOT!

 

http://demosthenes.info/blog/532/convert-images-to-black-and-white-with-css

Edited August 22, 2014 by dsonesuk

[bchau]

your filter code is incorrect, its gone a bit askew here

 

filter: url("data:image/svg+xml;utf8,<svg%20xmlns = 'http://www.w3.org/2000/svg'><filte…200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");

 

this works for firefox

url("data:image/svg+xml;utf8,<svg xmlns = 'http://www.w3.org/2000/svg'><filter id='greyscale'><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>#greyscale")

Apparently this wont work for IE10+, now that's a shocker, NOT!

 

http://demosthenes.info/blog/532/convert-images-to-black-and-white-with-css

 

Thanks! Got it to work properly on Firefox.

 

I was reading this site, found a link to it from the comments of the site you linked.

 

How would i go about adding support for IE10+?

 

My code looks like this now:

#projectThumbs .project .project-image .intrinsic div img {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");filter: gray;filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);}#projectThumbs .project .project-image .intrinsic:hover img {filter: grayscale(0%);-webkit-filter: grayscale(0%);filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");}

Half of the office i'm working for uses IE9-11, so i'd like to get all browsers covered.

Edited August 22, 2014 by bchau

[dsonesuk]

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js-v2-0-with-browser-feature-detection-using-modernizr/Download source and follow instructions