Probleme Fade sur img dans li

Bonjour,

J'ai pour but de creer un "footer" de plusieurs images a la suite qui font un effet FadeIn - FadeOut "aleatoirement" entres-elles, tout marche tres bien jusque la, seulement je bloque au niveau du css.

Je n'arrive pas a faire en sorte que chaques images (3 par LI) se superpose, ce qui m'oblige a jouer avec la propriete "display: none - display:inline" mais ca fait un effet un peu moche sur le fade, tandis que si je les enleves ca fait apparaitre la deuxieme images en dessous (et du coup, ca fait decaler mon footer).

J'ai essayer de jouer avec les positions mais si j'essaye de mettremes images ou mes LI en absolute ca fait tout simplement disparaitre ma div.

le code:

html:

<div class="slide">

        <li><img id="21" src="test/1.jpg">   <img id="1" style="display:none;" src="test/2.jpg">   <img id="11" style="display:none;" src="test/3.jpg"></li>

        <li><img id="27" src="test/2.jpg">   <img id="7" style="display:none;" src="test/3.jpg">   <img id="17" style="display:none;" src="test/4.jpg"></li>

        <li><img id="25" src="test/3.jpg">   <img id="5" style="display:none;" src="test/4.jpg">   <img id="15" style="display:none;" src="test/5.jpg"></li>

        <li><img id="22" src="test/4.jpg">   <img id="2" style="display:none;" src="test/5.jpg">   <img id="12" style="display:none;" src="test/3.jpg"></li>

        <li><img id="24" src="test/5.jpg">   <img id="4" style="display:none;" src="test/4.jpg">   <img id="14" style="display:none;" src="test/3.jpg"></li>

        <li><img id="28" src="test/1.jpg">   <img id="8" style="display:none;" src="test/3.jpg">   <img id="18" style="display:none;" src="test/2.jpg"></li>

	<li><img id="30" src="test/2.jpg">   <img id="10" style="display:none;" src="test/2.jpg">   <img id="20" style="display:none;" src="test/1.jpg"></li>

	<li><img id="23" src="test/3.jpg">   <img id="3" style="display:none;" src="test/2.jpg">   <img id="13" style="display:none;" src="test/5.jpg"></li>

	<li><img id="29" src="test/4.jpg">   <img id="9" style="display:none;" src="test/1.jpg">   <img id="19" style="display:none;" src="test/3.jpg"></li>

	<li><img id="26" src="test/5.jpg">   <img id="6" style="display:none;" src="test/1.jpg">   <img id="16" style="display:none;" src="test/2.jpg"></li>
</div>

css:

.slide
{
    /*background-color: black;*/
    position: fixed;
    float: left;
    width: 100%;
    bottom: 0;
    left: 0;
}

.slide li
{
    width: 10%;
    display: inline-block;
    float: left;
    list-style: none;
} 

li img
{
    width: 100%;
}

Merci !