Galerie html css

Bonjour bonjour,

voici ma galerie html :

<ul id="gallery">
			<li>
				<a href="#">
					<img src="images/galerie/galerie-france-resille-1-icone.jpg" alt="gallery thumbnail">
					<span><img src="images/galerie/galerie-france-resille-1.jpg" alt="gallery image"></span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/galerie/galerie-france-resille-2-icone.jpg" alt="gallery thumbnail">
					<span><img src="images/galerie/galerie-france-resille-2.jpg" alt="gallery image"></span>
				</a>
			</li>
			<li>
				<a href="#">
                	<img src="images/galerie/galerie-france-resille-3-icone.jpg" alt="gallery thumbnail">
					<span><img src="images/galerie/galerie-france-resille-3.jpg" alt="gallery image"></span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/galerie/galerie-france-resille-4-icone.jpg" alt="gallery thumbnail">
					<span><img src="images/galerie/galerie-france-resille-4.jpg" alt="gallery image"></span>
				</a>
			</li>									
		</ul>

et son CSS :

ul#gallery, ul#gallery li{
			margin:0;
			padding:0;
			list-style:none;
			}
			
		ul#gallery{
			width:1000px;
			height:482px;
			position:relative;
			background:white url(images/galerie/galerie-france-resille-4.jpg);
			}	
					
		ul#gallery li{
			margin-left:10px;
			margin-top:2px;
			}		
									
		ul#gallery a span{
			display:none;
			}
			
		ul#gallery a:hover{
			background:none;
			}	
			
		ul#gallery a:hover span{
			position:absolute;
			width:1000px;
			height:482px;
			float:left;
			top:0px;
			left:150px;
			display:block;
			}

Voici mon problème : j'aurais aimé que la grande image qui apparait au survol de la souris soit positionnée sous les icones, actuellement elle vient se placer au-dessus, ce qui empêche la navigation sur les autres boutons... Aussi est-ce possible de faire apparaitre un hover sur la petite icone carré lors du survol de la souris ? Mes images n'ont pas à être des liens bien qu'elles le soient ici.


Merci pour votre aide,

à très vite j'espère !