[Solved] Grayscale images on hover?

[ckubs]

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.

[Paulie_D]

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:

http://codepen.io/Paulie-D/pen/yxHsi

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

[Atelierbram]

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

[Paulie_D]

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

[Atelierbram]

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

[ckubs]

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

[Atelierbram]

@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 …

[Author]

Posts