bchau Posted August 22, 2014 Share Posted August 22, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2014 Share Posted August 22, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
bchau Posted August 22, 2014 Author Share Posted August 22, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2014 Share Posted August 22, 2014 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now