html - grayscale + color overlay

Question

I'm trying to create a hover-over effect where an image starts off and in full colour, and when I hover-over the image, I'd like it to have a blue overlay.

The thing is, with just a simple blue overlay, it's just putting a semi-transparent block of blue atop of a colour image... which means other colours are showing through a little. What I'd like is for the image to simply be shades of blue.

Now, I've managed to get an image to go grayscale, and I've managed to get a blue overlay, but is there any way to get CSS to stack the effects? Turn the image greyscale, then multiply the colour over it.

The easier way is likely to just create the effect as a raster image and then just have it change images, but it'd be nice if it could be done in code, instead.

Answer 1

I think you're looking for CSS filter property. See David Walshe's demo here : http://davidwalsh.name/demo/css-filters.php

It's currently experimental and only supported by Webkit I think, but it's the only way to achieve that with CSS.

You can also take a look to Adobe CSS custom filters : http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/

A demo of something I think you wanna do : http://jsbin.com/igahay/3011/ (from this topic: CSS image overlay with color and transparency)

Answer 2

Single image and css filters (if you are satisfied with the result):

		img.front { position: relative; opacity: 0; transition-property: opacity; transition-duration: 0.5s; }
		img.front:hover { opacity: 1; }
		img.back { position: absolute; -webkit-filter: sepia(100%) hue-rotate(180deg) saturate(300%); }

<img class="back" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" />
<img class="front" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" />