CSS3 एनीमेशन द्वारा पृष्ठभूमि छवि में फीका कैसे करें

Question

मैं एक मेनू बना रहा हूं कि प्रत्येक आइटम में आइटम 1, आइटम 2 और इत्यादि जैसे टेक्स्ट रंग बदलते हैं, पाठ पारदर्शी हो जाता है और पृष्ठभूमि छवि बदल जाती है। मैंने शैली को अंदर और बाहर आराम करने के लिए इस कोड का उपयोग किया। लेकिन यह केवल पृष्ठभूमि रंग के लिए काम करता है, न कि छवि।

#nav li:hover { 
    color:transparent !important; 
    text-shadow: none; 
    background-color: rgba(255, 0, 0, .5); 

    -webkit-transition: all 1s ease-in; 
    -moz-transition: all 1s ease-in; 
    -o-transition: all 1s ease-in; 
    -ms-transition: all 1s ease-in; 
    transition: all 1s ease-in; 
} 

यहाँ ऑनलाइन संस्करण है: http://jsfiddle.net/q4uHz/

Answer 1

पृष्ठभूमि चित्र एनिमेट नहीं किया जा सकता है; इसके लिए कोई एल्गोरिदम नहीं होगा। एक आसान समाधान <img> को अपने HTML में आइकन के साथ opacity: 0 के साथ शामिल करना और उसे एनिमेट करना है। कुछ इस तरह।

<li id="home"> 
<img src="http://cdn3.iconfinder.com/data/icons/picons-social/57/16-apple-48.png"> 
<a href="#home">Home</a></li> 

#nav li { 
    position: relative; 
} 
#nav li img { 
    opacity: 0; 
    position: absolute; 
    transition: all 1s ease-in; 
    top: 0; 
    left: 0; 
} 
#nav li:hover img { 
    opacity: 1; 
} 

http://jsfiddle.net/ExplosionPIlls/q4uHz/1/