Image Greyscale with CSS re-color on mouse-over

Question

I am looking to take an icon that is colored  and will be a link  and turn it greyscale until the user places their mouse over the icon  where it would then color the image    Is this possible to do  and in a way that is IE  amp  Firefox supported

User · Answer

You can use a sprite which has both version   the colored and the monochrome   stored into it

User · Answer

I use the following code on http   www diagnomics com   Smooth transition from b w to color with magnifying effect  scale       img color flip         filter  url filters svg grayscale      Firefox 3 5           filter  gray     IE5           -webkit-filter  grayscale 1      Webkit Nightlies  amp  Chrome Canary          -webkit-transition  all  5s ease-in-out             img color flip hover         filter  none        -webkit-filter  grayscale 0         -webkit-transform  scale 1 1

User · Answer

Here s a demo  Even works in IE7   http   james padolsey com demos grayscale   and  http   james padolsey com javascript grayscaling-in-non-ie-browsers

User · Answer

Answered here  Convert an image to grayscale in HTML CSS  You don t even need to use two images which sounds like a pain or an image manipulation library  you can do it with cross browser support  current versions  and just use CSS   This is a progressive enhancement approach which just falls back to color versions on older browsers   img     filter  url filters svg grayscale        Firefox 3 5       filter  gray       IE6-9      -webkit-filter  grayscale 1        Google Chrome  amp  Safari 6       img hover     filter  none    -webkit-filter  none      and filters svg file like this    lt svg xmlns  http   www w3 org 2000 svg  gt     lt filter id  grayscale  gt       lt feColorMatrix type  matrix  values  0 3333 0 3333 0 3333 0 0 0 3333 0 3333 0 3333 0 0 0 3333 0 3333 0 3333 0 0 0 0 0 1 0    gt     lt  filter gt   lt  svg gt

User · Answer

There are numerous methods of accomplishing this  which I ll detail with a few examples below   Pure CSS  using only one colored image   img grayscale     filter  url  data image svg xml utf8  lt svg xmlns   http   www w3 org 2000 svg   gt  lt filter id   grayscale   gt  lt feColorMatrix type   matrix   values   0 3333 0 3333 0 3333 0 0 0 3333 0 3333 0 3333 0 0 0 3333 0 3333 0 3333 0 0 0 0 0 1 0    gt  lt  filter gt  lt  svg gt  grayscale       Firefox 3 5       filter  gray     IE6-9      -webkit-filter  grayscale 100       Chrome 19   amp  Safari 6        img grayscale hover     filter  none    -webkit-filter  grayscale 0         x000D   x000D  img grayscale   x000D    filter  url  data image svg xml utf8  lt svg xmlns   http   www w3 org 2000 svg   gt  lt filter id   grayscale   gt  lt feColorMatrix type   matrix   values   0 3333 0 3333 0 3333 0 0 0 3333 0 3333 0 3333 0 0 0 3333 0 3333 0 3333 0 0 0 0 0 1 0    gt  lt  filter gt  lt  svg gt  grayscale    x000D       Firefox 3 5   IE10    x000D    filter  gray  x000D       IE6-9    x000D    -webkit-filter  grayscale 100    x000D       Chrome 19   amp  Safari 6     x000D    -webkit-transition  all  6s ease  x000D       Fade to color for Chrome and Safari    x000D    -webkit-backface-visibility  hidden  x000D       Fix for transition flickering    x000D    x000D   x000D  img grayscale hover   x000D    filter  none  x000D    -webkit-filter  grayscale 0    x000D    x000D   x000D  svg   x000D    background  url http   4 bp blogspot com -IzPWLqY4gJ0 T01CPzNb1KI AAAAAAAACgA  8uyj68QhFE s400 a2cf7051-5952-4b39-aca3-4481976cb242 jpg   x000D    x000D   x000D  svg image   x000D    transition  all  6s ease  x000D    x000D   x000D  svg image hover   x000D    opacity  0  x000D    x000D   lt p gt Firefox  Chrome  Safari  IE6-9 lt  p gt  x000D   lt img class  grayscale  src  http   4 bp blogspot com -IzPWLqY4gJ0 T01CPzNb1KI AAAAAAAACgA  8uyj68QhFE s1600 a2cf7051-5952-4b39-aca3-4481976cb242 jpg  width  400  gt  x000D   lt p gt IE10 with inline SVG lt  p gt  x000D   lt svg xmlns  http   www w3 org 2000 svg  id  svgroot  viewBox  0 0 400 377  width  400  height  377  gt  x000D     lt defs gt  x000D        lt filter id  filtersPicture  gt  x000D          lt feComposite result  inputTo 38  in  SourceGraphic  in2  SourceGraphic  operator  arithmetic  k1  0  k2  1  k3  0  k4  0    gt  x000D          lt feColorMatrix id  filter 38  type  saturate  values  0  data-filterid  38    gt  x000D       lt  filter gt  x000D     lt  defs gt  x000D     lt image filter  url  amp quot  filtersPicture amp quot    x  0  y  0  width  400  height  377  xmlns xlink  http   www w3 org 1999 xlink  xlink href  http   4 bp blogspot com -IzPWLqY4gJ0 T01CPzNb1KI AAAAAAAACgA  8uyj68QhFE s1600 a2cf7051-5952-4b39-aca3-4481976cb242 jpg    gt  x000D      lt  svg gt  x000D   x000D   x000D    You can find an article related to this technique here    Pure CSS  using a grayscale and colored images   This approach requires two copies of an image  one in grayscale and the other in full color  Using the CSS  hover psuedoselector  you can update the background of your element to toggle between the two    yourimage        background  url    grayscale-image png      yourImage hover        background  url    color-image png        x000D   x000D   google   x000D    background  url  http   www google com logos keystroke10-hp png    x000D    height  95px  x000D    width  275px  x000D    display  block  x000D       Optional for a gradual animation effect    x000D    transition  0 5s  x000D    x000D   x000D   google hover   x000D    background  url  https   graphics217b files wordpress com 2011 02 logo1w png    x000D    x000D   lt a id  google  href  http   www google com  gt  lt  a gt  x000D   x000D   x000D    This could also be accomplished by using a Javascript-based hover effect such as jQuery s hover   function in the same manner   Consider a Third-Party Library  The desaturate library is a common library that allows you to easily switch between a grayscale version and full-colored version of a given element or image

[css] Image Greyscale with CSS & re-color on mouse-over?

Examples related to css

Examples related to mouseover

Examples related to grayscale