Pure CSS Gallery for eBay Listing
===

I'm using this CSS gallery in my eBay listings:

http://cssglobe.com/articles/link_tech/02.html

It works great, but I didn't account for longer vertical images, so, as you can see in this listing: 

http://www.ebay.com/itm/First-Years-True-Fit-Recline-Convertible-Car-Seat-Black-Green-15594-/110925703588?pt=LH_DefaultDomain_0&hash=item19d3afe9a4#ht_2641wt_1270

... the longer images will cover the thumbnail images. I was wondering if it's possible to have the thumbnails move depending on the size of the of the main gallery image. 

Here's the code:

        <ul id="gallery">
						<a href="[IMAGE1_URL]" target="_blank"><img src="[IMAGE1_URL]" width="400px" /></a>
			<li>
				<a href="[IMAGE1_URL]" target="_blank">
					<img src="[IMAGE1_URL]" border="0px" width="100px" alt="gallery thumbnail" />
					<span><img src="[IMAGE1_URL]" width="400px" alt="gallery image" /></span>
				</a>
			</li>
			<li>
				<a href="[IMAGE2_URL]" target="_blank">
					<img src="[IMAGE2_URL]" border="0px" width="100px" alt="gallery thumbnail" />
					<span><img src="[IMAGE2_URL]" width="400px" alt="gallery image" /></span>
				</a>
			</li>
			<li>
				<a href="[IMAGE3_URL]" target="_blank">
					<img src="[IMAGE3_URL]" border="0px" width="100px" alt="gallery thumbnail" />
					<span><img src="[IMAGE3_URL]" width="400px" alt="gallery image" /></span>
				</a>
			</li>
			<li>
				<a href="[IMAGE4_URL]" target="_blank">
					<img src="[IMAGE4_URL]" border="0px" width="100px" alt="gallery thumbnail" />
					<span><img src="[IMAGE4_URL]" width="400px" alt="gallery image" /></span>
				</a>
			</li>
			<li>
				<a href="[IMAGE5_URL]" target="_blank">
					<img src="[IMAGE5_URL]" border="0px" width="100px" alt="gallery thumbnail" />
					<span><img src="[IMAGE5_URL]" width="400px" alt="gallery image" /></span>
				</a>
			</li>
			<li>
				<a href="[IMAGE6_URL]" target="_blank">
					<img src="[IMAGE6_URL]" border="0px" width="100px" alt="gallery thumbnail" />
					<span><img src="[IMAGE6_URL]" width="400px" alt="gallery image" /></span>
				</a>
			</li>
			<li>
				<a href="[IMAGE7_URL]" target="_blank">
					<img src="[IMAGE7_URL]" border="0px" width="100px" alt="gallery thumbnail" />
					<span><img src="[IMAGE7_URL]" width="400px" alt="gallery image" /></span>
				</a>
			</li>
			<li>
				<a href="[IMAGE8_URL]" target="_blank">
					<img src="[IMAGE8_URL]" border="0px" width="100px" alt="gallery thumbnail" />
					<span><img src="[IMAGE8_URL]" width="400px" alt="gallery image" /></span>
				</a>
			</li>							
		</ul>

And the CSS:

        ul#gallery, ul#gallery li{
			margin:0;
			padding:0;
			list-style:none;
			}
		ul#gallery{
			width:400px;
			height: 375px;
			position:relative;
			}			
		ul#gallery li{
			float:left;
			display:inline;
			margin-top:10px;
			}								
		ul#gallery a span{
			display:none;
			}
		ul#gallery a:hover{
			background:none;
			z-index:100;
			}	
		ul#gallery a:hover span{
			position:absolute;
			width:400px;
			height:300px;
			float:left;
			top:0;
			left:0;
			display:block;
			}
