होवर पर एक छवि बारी काले और सफेद बनाएं

Question

मेरे पास एक लिंक की गई छवि है और जब मैं उपयोगकर्ता इसे घुमाता हूं तो मैं इसे काला और सफ़ेद बनाना चाहता हूं। क्या कोई मदद कर सकता है? मुझे इसे या तो सीएसएस या जावास्क्रिप्ट के साथ बनाना होगा। धन्यवाद

Answer 1

इस प्रयास करें:

img.imgClass:hover { 
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ 
    filter: gray; /* IE5+ */ 
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ 
} 
img.imgClass { 
    filter: none; 
    -webkit-filter: grayscale(0); 
} 

Answer 2

आप काले और सफेद "मुखौटे" के लिए देख सकते हैं। Here उस पर एक लेख है।

Answer 3

सीएसएस 3 में छवि फ़िल्टर के लिए एक कल्पना है, लेकिन इस widly अभी समर्थित नहीं है यहां तक ​​कि आधुनिक ब्राउज़रों में:

img:hover { 
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ 
    filter: gray; /* IE5+ */ 
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ 

} 

इसके बजाय आप इस प्रभाव के साथ हर छवि के लिए एक काले और सफेद विकल्प बना सकता है:

<a href="..."><img class="grayscale" src="..." /><img class="color" src="..." /></a> 

इस सीएसएस के साथ

: (परीक्षण नहीं)

a img.grayscale { 
    display: none; 
} 
a:hover img.color { 
    display: none; 
} 
a:hover img.grayscale { 
    display: block; 
} 

चूक gra yscale छवि छिपी हुई है, होवर पर रंगीन छुपा हो जाता है और ग्रेस्केल दिखाया जाता है।