Treehouse: Grow your CSS skills. Land your dream job.

[Solved] Grayscale images on hover?

  • # May 16, 2014 at 7:21 am

    I saw a tutorial or two about how to make an image black and white on it’s default state and normal( colored) on hover.

    Is it possible the other way around? I want to have my site images normal in the default state and with the grayscale effect on hover.

    Thanks for any help.

    # May 16, 2014 at 7:41 am

    there are a number of ways to do this.

    The first technique involves two versions of the image, one color and the other greyscale.

    The other involves the filter property available to the latest browsers. You can see the support for those here – http://caniuse.com/#search=filter

    Here’s example of both:

    There are other possibilities including the use of pseudo elements but the techniques are basically the same.

    # May 16, 2014 at 7:42 am

    Why wouldn’t that be possible? This isn’t even an issue, is it? Swapping the values of a:link and a:hover, isn’t this the sort of thing you do all the time when editing your stylesheet?

    To be slightly more helpful, there is also the SVG implementation of grayscale

    # May 16, 2014 at 7:57 am

    Why wouldn’t that be possible? This isn’t even an issue, is it? Swapping the values of a:link and a:hover, isn’t this the sort of thing you do all the time when editing your stylesheet?

    Has there been an edited post I’m missing somewhere

    # May 16, 2014 at 8:01 am

    @Paulie_D
    Maybe I am missing something, but you are more of a gentleman, for sure.

    # May 16, 2014 at 8:02 am

    Thanks @Paulie_D and @Atelierbram.

    About SVG implementations I known too little. Now I guess it’s a starting point to learn that stuff too :D

    # May 16, 2014 at 8:06 am

    @ckubs
    You’re welcome, sorry about the snappy reaction, I just wonder about the (seemingly?) lack of problem solving intention that is revealed in some questions, … but then we all have to learn …

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.