Hi there,

 

I am adding opacity to some of my images, I want to add color on hover over... how do I achieve this?

 

I have tried color: .... background-color: but does not work?

 

Here is my css;

 

.fanbox2 img {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.fanbox2 img:hover {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

You can't saturate/desaturate images with CSS (at least, not without proprietary filters and SVG trickery). Your best bet would be to make sprites of the colour and monochrome versions of each image and use background-position and/or opacity.

 

Unless I'm misunderstanding and you just want to add a colour cast to semi-opaque images?

Edited February 25, 201214 yr by Renaissance-Design
typo

As RD has said, you can't do this with just CSS.

 

Here is a tutorial ; http://webdesignerwall.com/tutorials/html5-grayscale-image-hover

Thanks for the advice, renaissance the closest example I can give is facebooks login page where it has the video on the left, you hover over it and the opacity goes darker but you see the image below .... similar to fancybox style images?

 

I can create an image that takes the colour out and swap on mouse over.