如何通过CSS3动画在背景图像中淡入淡出

我正在制作一个菜单，每个项目都有一个文本，如项目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;
}

以下是在线版本：

---

背景图像无法设置动画；这方面没有算法。一个简单的解决方案是包含

#李海军{
位置：相对位置；
}
#导航李img{
不透明度：0；
位置：绝对位置；
过渡：所有1都容易进入；
排名：0；
左：0；
}
#导航李：悬停img{
不透明度：1；
}

<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;
}