सीएसएस का उपयोग करके माउस-ओवर पर रंग बहाली के साथ ग्रेस्केलिंग

माउस-ओवर पर रंग बहाली के साथ ग्रेस्केल उपस्थिति प्राप्त करना विभिन्न तरीकों से संभव है , IE और फ़ायरफ़ॉक्स दोनों में क्रॉस-ब्राउज़र संगतता प्रदान करता है।

विधि 1: शुद्ध सीएसएस (एकल रंगीन छवि का उपयोग करके)

यह तकनीक सभी समर्थित ब्राउज़रों में छवि को ग्रेस्केल करने के लिए विक्रेता उपसर्गों के साथ फ़िल्टर संपत्ति का उपयोग करती है:

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%);
}

विधि 2: शुद्ध सीएसएस (दो छवियों का उपयोग करके)

एक अन्य दृष्टिकोण में दो छवियों का उपयोग करना शामिल है: एक ग्रेस्केल संस्करण और एक रंगीन संस्करण। ग्रेस्केल छवि प्रारंभ में प्रदर्शित होती है, और होवर स्थिति रंगीन छवि में बदल जाती है:

img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}

विधि 3: CSS फ़िल्टर के साथ SVG

IE10 और आधुनिक ब्राउज़र के लिए, इनलाइन SVG हो सकता है फ़िल्टर लागू करने के लिए उपयोग किया जाता है, जिससे ग्रेस्केल प्रभाव को गतिशील रूप से नियंत्रित किया जा सकता है:

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

svg image:hover {
  opacity: 0;
}