Return to Question

I am trying to work out how to change the hue of a greyscale image using CSS...

I have two images (one colour and one greyscale) and have 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 colour image, but the greyscale image remains unchanged.

Is there a way to change the hue of greyscale images, either using CSS another technology?

A demo is here: http://jsfiddle.net/ATpv8/

Many thanks in advance for your help...

I am trying to work out how to change the hue of a greyscale image using CSS...

I have two images (one colour and one greyscale) and have 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 colour image, but the greyscale image remains unchanged.

Is there a way to change the hue of greyscale images, either using CSS another technology?

A demo is here: http://jsfiddle.net/ATpv8/

I am trying to work out how to change the hue of a greyscale image using CSS...

I have two images (one colour and one greyscale) and have applied this code to both:

-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 colour image, but the greyscale image remains unchanged.

Is there a way to change the hue of greyscale images, either using CSS another technology?

A demo is here: http://jsfiddle.net/ATpv8/

Many thanks in advance for your help...

I am trying to work out how to change the hue of a greyscale image using CSS...

I have two images (one colour and one greyscale) and have 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 colour image, but the greyscale image remains unchanged.

Is there a way to change the hue of greyscale images, either using CSS another technology?

A demo is here: http://jsfiddle.net/ATpv8/

Many thanks in advance for your help...

I am trying to work out how to change the hue of a greyscale image using CSS...

I have two images (one colour and one greyscale) and have applied this code to both:

-webkit-filter: hue-rotate(300deg);

This successfully changes the colour image, but the greyscale image remains unchanged.

Is there a way to change the hue of greyscale images, either using CSS another technology?

A demo is here: http://jsfiddle.net/ATpv8/

Many thanks in advance for your help...

I am trying to work out how to change the hue of a greyscale image using CSS...

I have two images (one colour and one greyscale) and have applied this code to both:

-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 colour image, but the greyscale image remains unchanged.

Is there a way to change the hue of greyscale images, either using CSS another technology?

A demo is here: http://jsfiddle.net/ATpv8/

Many thanks in advance for your help...