SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry css color overlay instead of opacity change

    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. #2
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mouseover-filter

    Hi krayziepjf,

    something like this?
    example

    --

    I used this two styles for switching on MouseOver

    Code:
    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..

    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. #3
    SitePoint Enthusiast JohnShaft's Avatar
    Join Date
    Oct 2002
    Location
    England
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    HorrorExpress.com - all the latest Horror Movie Reviews and News

  4. #4
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb ok

    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. #6
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Enthusiast JohnShaft's Avatar
    Join Date
    Oct 2002
    Location
    England
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    HorrorExpress.com - all the latest Horror Movie Reviews and News

  8. #8
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb 3 times ...

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

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

    I think I come very close now.

    cheers!

  9. #9
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  10. #10
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I won't..

    you'r welcome.

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

    cheers.


    Wisbin

  11. #11
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy have tested it

    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)
    Last edited by wisbin; Jan 8, 2003 at 07:42.
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  13. #13
    SitePoint Enthusiast JohnShaft's Avatar
    Join Date
    Oct 2002
    Location
    England
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    HorrorExpress.com - all the latest Horror Movie Reviews and News


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •