होवर पर सीएसएस संक्रमण फीका

Question

मुझे CSS संक्रमणों में समस्या आई है। मैं अपने पोर्टफोलियो के लिए CSS गैलरी डिज़ाइन कर रहा हूं और मुझे अपनी छवियों को होवर पर फीका करने की आवश्यकता है। मैं इसके साथ एक घंटे से अधिक समय से खेल रहा हूं और मुझे उम्मीद थी कि कोई मुझे सही दिशा में इंगित कर सकता है।

यहाँ JSFiddle

Answer 1

मैं आप अपनी छवि गैलरी के लिए एक बिना क्रम वाली सूची का उपयोग करने की सलाह देते करना होगा है।

आपको मेरे कोड का उपयोग तब तक करना चाहिए जब तक कि आप छवि को तुरंत बाहर करने के बाद 50% अस्पष्टता प्राप्त नहीं करना चाहते। आपके पास एक आसान संक्रमण होगा। मंडराना तत्व है कि मेरी समस्या का कारण:

#photos li { 
    opacity: .5; 
    transition: opacity .5s ease-out; 
    -moz-transition: opacity .5s ease-out; 
    -webkit-transition: opacity .5s ease-out; 
    -o-transition: opacity .5s ease-out; 
} 

#photos li:hover { 
    opacity: 1; 
} 

Answer 2

इस के साथ यह करने के लिए एक सरलीकृत संस्करण चाल

.gallery-item 
{ 
    opacity:1; 
} 

.gallery-item:hover 
{ 
    opacity:0; 
    transition: opacity .2s ease-out; 
    -moz-transition: opacity .2s ease-out; 
    -webkit-transition: opacity .2s ease-out; 
    -o-transition: opacity .2s ease-out; 
}