التدرج الرمادي مع استعادة اللون عند تمرير الماوس باستخدام CSS

يمكن تحقيق مظهر التدرج الرمادي مع استعادة اللون عند تمرير الماوس من خلال طرق مختلفة ، مما يوفر توافقًا عبر المتصفحات في كل من IE وFirefox.

الطريقة الأولى: Pure CSS (باستخدام ملف ملون واحد صورة)

تستخدم هذه التقنية خاصية التصفية مع بادئات البائع لتدرج الصورة باللون الرمادي في جميع المتصفحات المدعومة:

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

الطريقة الثانية: Pure CSS (استخدام صورتين)

هناك طريقة أخرى تتضمن استخدام صورتين: نسخة ذات تدرج رمادي ونسخة ملونة. يتم عرض الصورة ذات التدرج الرمادي في البداية، وتنتقل حالة التمرير إلى الصورة الملونة:

img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}

الطريقة الثالثة: SVG مع مرشحات CSS

بالنسبة إلى IE10 والمتصفحات الحديثة، يمكن أن يكون SVG المضمّن تستخدم لتطبيق المرشحات، مما يسمح بالتحكم في تأثير التدرج الرمادي ديناميكيًا:

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

svg image:hover {
  opacity: 0;
}