CSSだけで作るイメージギャラリー[CSS]

イメージをホバーした時にイメージギャラリーが切り替わるというＴｉｐｓです。
リストベースでの作成になります。

CSS

body {  
 color:#333333;  
 margin:0px;  
 padding:0px;  
 }  
img {  
 border:none;  
 padding:0px;  
 margin:0px;  
 }

ul#gallery {  
 width:400px;  
 height:300px;  
 position:relative;  
 background:#E1E1E1 url("imagegallery.png") no-repeat scroll 50% 40%;  
 list-style-type:none;  
 list-style-position:outside;  
 margin:0px auto;  
 padding:0px;  
 }

ul#gallery li {  
 padding:0px;  
 margin:0px 0px 0px -150px;  
 }  
ul#gallery li img {  
 display:block;  
 padding:0px;  
 margin:0px;  
 }

ul#gallery li a span {  
 display:none;  
 }

ul#gallery li a:hover span {  
 position:absolute;  
 width:400px;  
 height:300px;  
 top:0;  
 left:0;  
 display:block;  
 border:none;  
 }

ul#gallery li a span em {  
 display:none;  
 }

ul#gallery li a:hover span em {  
 position:absolute;  
 width:150px;  
 min-height:300px;  
 height:auto !important;/**Min height hack for IE**/  
 height:300px;/*Needs to match min-height pixels above*/  
 top:0px;  
 left:-300px;  
 display:block;  
 color:#333333;  
 text-decoration:none;  
 } 

XHTML

<ul id="gallery">  
<li><a href="#"><img src="xxx1.jpg" alt="sunset" /><span><img src="xxx1.jpg" alt="whale" />  
<em>Chicks dig sunsets!</em></span></a></li> 
<li><a href="#"><img src="xxx2.jpg" alt="cricket" /><span><img src="xxx2.jpg" alt="grasshopper" />  
<em>Patience grasshopper...</em></span></a></li>  
<li><a href="#"><img src="xxx3.jpg" alt="rose" /><span><img src="xxx3." alt="rose" />  
<em>This is a picture of a rose!</em></span></a></li>  
</ul>