Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Black and White image fade.

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #37574
    rpdtwo
    Member

    Hey Guys,

    First post:] First off, love css-trick.com we are very lucky to have this great resource. Goodman Chris!

    I am building a home page that has a big spinner, and some some thumbnails under it. I want the thumbnails to be black and white on rollover they go color.

    I have been seeing more and more sites with black and white images then you rollover them for color. Is there a simple way to achive this with a css filter??

    Thanks!

    Rp

    #100972
    chrisburton
    Participant

    Not that I’m aware of. jQuery is the solution.

    #100974
    dfogge
    Participant

    yep, unfortunately christopher is right. there are some solutions to this on the horizon but nothing easy that works cross browser yet.

    this tutorial might be helpful to you: http://webdesignerwall.com/tutorials/html5-grayscale-image-hover

    #101003
    rpdtwo
    Member

    Thanks guys!! I will take a look at the link and see what I can put together.

    #115837
    jonmitten
    Member
    #116639

    If you are looking for the easiest css-proof way. You could create the grayscale of your image in Photoshop, and simply absolutely position both the color image and the greyscale image on top of another. Then display: block one image and display: none the other , depending on which one you wanted to see when you hovered. And then add a fade for a nice transition…. I believe this would work, could be completely wrong though

    #128874
    paulzmuda
    Member

    You can do it in PHP and you’re guaranteed cross-browser support. If you have a lot of images, or the image is really big then it might slow down the page load a bit but in my eyes it’s worth the outcome. I really hate dealing with browser issues when I dont need to. There are a few tutorials out there but this one worked for me quickly: http://php.about.com/od/gdlibrary/ss/grayscale_gd.htm

    EDIT: Crap I just realized you wanted it to work on roll-over. Well, I guess you could use the css hover property with the php idea above as the second image. It would be like swatting a fly with an anvil but you’ll know it will always work.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.