导航菜单背景更改悬停

Question

当您将鼠标悬停在每个链接上时，我想制作一个全屏导航菜单覆盖，背景会发生变化。但似乎图像与列表链接出现在同一级别上，使空格保持空白。任何想法如何解决这个问题？

这是代码：

<ul>
        <li class=" animated fadeInDown delay-002 "><a href="story.html" title="Story">BLABLA</a><img src="uploads/images/header/_header/12_photo_3.jpg" alt=""></li>
        <li class=" animated fadeInDown delay-003"><a href="services.html" title="Services">Services</a><img src="uploads/images/header/_header/5659081.jpg" alt=""></li>
        <li class=" animated fadeInDown delay-004"><a href="news.html" title="News">News</a></li>
        <li class=" animated fadeInDown delay-005"><a href="contact.html" title="Contact">Contact</a></li>  
    </ul>

.nav-overlay img{
position: absolute;
opacity:0;
z-index: -60;}



.nav-overlay ul li img{
position: absolute;
top:0;
left:0;
z-index: -50;}


.nav-overlay li a:hover + img { opacity: 1;}