Greyscaling with Color Restoration on Mouse-over Using CSS

Achieving a grayscale appearance with color restoration on mouse-over is possible through various methods, providing cross-browser compatibility in both IE and Firefox.

Method 1: Pure CSS (Using a Single Colored Image)

This technique utilizes the filter property with vendor prefixes to grayscale the image in all supported browsers:

img.grayscale {
  filter: url("data:image/svg xml;utf8, ..."); /* Firefox 3.5  */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19 , Safari 6  */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Method 2: Pure CSS (Using Two Images)

Another approach involves using two images: a grayscale version and a colored version. The grayscale image is initially displayed, and the hover state transitions to the colored image:

img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}

Method 3: SVG with CSS Filters

For IE10 and modern browsers, inline SVG can be used to apply filters, allowing the grayscale effect to be controlled dynamically:

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}