Css color overlay instead of opacity change

HTML & CSS
1

Using standard CSS filters, in the past I have been able to change the opacity of images to make them seemed greyed out. I have a different issue now. Instead of greying out and image, instead I wish to overlay it with a specific color, and then on the mouseover, remove the overlayed color to reveal the image as is. Is there anyway to do this with known CSS/Javascript techniques? I have been unsuccessful in my attempts to find anything relating to this in the sitepoint forums yet, but I am always willing to believe I missed something. If anyone has any resources I can view or can provide me with a solution to this issue, It would most greatly be appreciated.

Thank you.

2

Hi krayziepjf,

something like this?
example

–

I used this two styles for switching on MouseOver


IMG.thumbnail {
	border: 1px solid #CCCCCC;
	margin-left: 30px;
	margin-bottom: 30px;
	float: left;
	filter: Alpha(Opacity=10, Style=0);
   -moz-opacity: 10%;
   opacity: 10%;
	}

IMG.thumbnail_on {
	cursor : hand;
	border: 1px solid #000;
	margin-left: 30px;
	margin-bottom: 30px;
	float: left;
	filter: Alpha(Opacity=100, Style=0);
   -moz-opacity: 100%;
   opacity: 1;
	}

And some P7extension to make the switch possible…(see source.

This works fine, but is not exactly what you mean… :stuck_out_tongue:

Maybe you could try to SNAP another DIV on top of the image-box with a semi-transparent bg-image, with your desired color and name it “style_off” and then onMouseOver switch the style on this extra DIV to “style_on” where you put a complete transparent image as background.

thats all i know (for now)

3

I want to do the exact same thing on my site so I can keep with the color tinted theme, instead I’m having to just black and white the images.

Wisbin I believe the alpha opacity you have used on your site is exactly what crayz has done, he now needs (like me) to be able to tint the images with a specified colour.

If anyone does know a way to do this I too would appreciate it.

4

Yes, what Wisbin posted is what I have been able to do in the past. Now, exactly as you said JohnShaft, I need to ‘tint’ images with a specified color, instead of grey them out.

5

OK, I know what you mean, I posted this anyway, because I think it could be helpfull to others.

About the tinting stuff, I’m not sure what effect you are trying to achieve, I dont get the part: “grey them out, with colours”. Do you mean something like this?

>> example tinted overlays

… or do you want to change the opacity of the image PLUS a coloroverlay like the above sample?

  • this is as far as I can get… (for now)

Wisbin

6

Wisbin, you are getting closer. On the link you provided before, what I would like is to use CSS to make my pictures have that red overlay like the top SitePoint image, but when you mouseover them, to take the red overlay off and see the normal SitePoint image. I didn’t want to make two different images to do this. I just want to use CSS to do it for me.

7

Thanks for the help wisbin.

That is sort of what I want to acheive.
Unfortunately on that link you provided they are doing it with an overlayed image by having a grid consisting of the colour and transparent blocks.
To me that looks horrible.

I want to overlay it with a colour that is semi transparent (if it needs to be done the overlay way). Think of the way you can tint using a colour of certain transparency for a div, so you can see half of the background beneath.
I guess maybe that’s the only current workaround atm.

But the blocky looking effect on that linked page looks far to pixely for me to use.

8

absolutely true, I would not use it either like this, to blocky.

But look at this: http://www.ict-id.nl/temp/sitepoint/html/coloroverlay.html

I think I come very close now.

:wink: cheers!

9

This is exactly what I am looking for Wisbin. Thank you for all your help, and don’t take down that page for a while! :slight_smile:

10

you’r welcome.

Share the implementation on your project(s), please.

cheers.

Wisbin

11

Haven’t tested this, but could you set the background color of the image to the color you want for the “overlay” and then decrease the image’s opacity letting the background color come up through the image? If this sounds really stupid, I apologize. I’ve never really played around with the filter property, but this solution just jumped out as a logical conclusion while reading the thread.

12

nope, doesnt work. Would be nice solution though. But helas, the imagebox doesnt show the background color on the bottom layer, it stays white (default background-color of img I guess)

…

still like to know if this opacity-filter works on older browsers and mac platform… anybody?

(works on PC: IE6+, Mozilla 1+, NS6+, Opera 7)

13

Thanks for this Wisbin, this is exactly what I wanted to do in tinting the thumbnailes of movie images on my site.

It was more complicated than I imagined, all I had been using in the past had been basic filters. But the great thing is it works in Netscape, I actually thought filters didn’t work at all in Netscape.

I haven’t managed to figure out how I can implement it yet (all it’s doing is the opacity with no tint) but that’s because I can’t figure out the Layer stuff involved. My CSS knowledge is functional at best.
I’m going to have a real crack at it using your example soon as I get time. I also have a Javascript book coming so maybe that may help me to figure it.

Thanks, and I’ll be sure to post back here when I have it fully up and running.