Как увядать в фоновом изображении с помощью CSS3 Анимация

Question

Я создаю меню, в котором каждый элемент имеет текст, такой как item1, item2 и т. Д. При наведении на цвет фона, текст становится прозрачным и заменяется фоновое изображение. Я использовал этот код, чтобы облегчить стиль и стиль. но он работает только для фона, а не для изображения.

#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/