Geek Answers Handbook

Apply CSS rotation filter for grayscale

I am trying to figure out how to change a grayscale image using CSS ...

I have two images (one color and one shade of gray) and applied this code to both:

CSS

img { width: 10pc; float: left; } .huerotate { -webkit-filter: hue-rotate(300deg); }

HTML:

 <img alt="Test photo: Mona Lisa" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" class="huerotate" /> <img alt="Test photo: Hand" src="http://i821.photobucket.com/albums/zz137/ocnsamu/Capture-2.jpg" class="huerotate" />

This successfully changes the color image, but the grayscale image remains unchanged.

Is there a way to change the hue of grayscale images using either other CSS technology?

Demo here: http://jsfiddle.net/ATpv8/

Many thanks for your help...

+6
source share
1 answer

Since grayscale images do not contain color by definition, you first need to add a sepia filter to “smear” a grayscale photo.

From there, the hue function can be applied to give a hue to the color.

 .colorme { -webkit-filter: sepia(100%) hue-rotate(300deg); }

Demo here: http://jsfiddle.net/ATpv8/2/

+10
source

More articles:


All Articles