सीएसएस छवि को घुमाने पर ब्लॉक टेक्स्ट के लिए संक्रमण में फीका?

Question

तो यह मेरा कोड है और जब आप छवि को घुमाते हैं तो मैं पाठ और पृष्ठभूमि रंग में फीका करने के लिए css3 संक्रमण का उपयोग करना चाहता था। मैंने कई चयनकर्ताओं और संक्रमण प्रकारों की कोशिश की है लेकिन यह ठीक से प्रतीत नहीं होता है कि किसी भी मदद की सराहना की जाती है।

बल्कि display:none और display:block का उपयोग करने से डेमो नीचे

http://jsfiddle.net/jiceb/xsFmA/

<a href="#"> 
     <h2>Some Text</h2> 
     <img src="http://www.sheridanrogers.com.au/wp-content/uploads/2011/03/American-pancakes.jpg"/> 
</a> 

और सीएसएस

a { position: relative; display: inline-block } 

a img { 
    width:250px; 
} 

a h2 { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: 0; 
    background: black; 
    color: #fff; 
} 

a:hover h2 { 
    display: block; 
} 

Answer 1

देखते हैं, बस अपने a h2 चयनकर्ता के opacity का उपयोग करें और एक transition जोड़ें:

a h2 { 
    opacity:0; /* Completely invisible. */ 
    transition:1s; /* A 1 second transition. */ 
} 

a:hover h2 { 
    opacity:1; /* Completely visible. */ 
} 

इससे 1 सेकंड की अवधि में अस्पष्टता 0 से 1 तक बढ़ जाएगी।

JSFiddle demo।