So the challenge today is to see if I can use a new css image effect on my website. if I can automatically change an image to grey without using Photoshop or any other image editing software. With CSS and browser support improving every month, I was sure this is probably a simple style guide reference. Of course I would want the grayscale css image effect to work for all browsers.
To start with, I did some research on the web. Initially advice on other sites suggests using a JavaScript code. Others gave several variants on that principle, but I had heard that web-kit filters are generally supported well by IE, Chrome, Firefox and Safari.
What I wanted to achieve is to take a colour photo and have it showing as a full grayscale image. Then when hovered over it would turn colour possibly with a smooth transition. Finally if clicked, it would open up a large colour version of the image thereby producing a really cool image effect.
It appears that the main CSS required for converting an image to Grayscale is:
img {
-webkit-filter: grayscale(100%);
}
img a:hover {
-webkit-filter: hue-rotate(50deg);
-webkit-filter: grayscale(0%);
}
Just to be on the safe side I will add the full compatible CSS for the filter effect.
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grayscale.svg); /* Firefox 4+ */
filter: gray; /* IE 6-9 */
}
In Conclusion, I will post the full effect of the grayscale css and how it looks in all browsers once its live on the new web site
Further Update: The new site is now live. You can see the effect here: on my services page. Hover over the icon images and you will see them change from gray to colour icons.