galeria

• 
• 
• 
• 
• 
• 

<style>
#galeria { /* este es el div que contiene la galería */
background: #101921;
border: 10px solid #505961;
height: 300px;
position: relative;
width: 600px;
margin: 30px auto;
overflow: visible;
}
#galeria ul { /* la lista */
margin: 0;
padding: 0;
text-align: center;
}
#galeria ul li { /* cada item de la lista */
display: inline-table;
list-style: none;
padding: 10px;
vertical-align: middle;
}
#galeria ul li .pic { /* la imagen normal */
background-color: #000;
border: 2px solid #000;
left: 130px;
padding: 10px;
position: absolute;
top: 15px;
visibility:hidden;
-moz-box-shadow: 0 0 20px #ABC inset;
-webkit-box-shadow: 0 0 20px #ABC inset;
box-shadow: 0 0 20px #ABC inset;
}
#galeria ul li .mini:hover { /* efecto sobre las miniaturas */
cursor: pointer;
}
#galeria ul li:hover .pic { /* efecto sobre las imágenes */ 
visibility: visible;
}
</style>

• 
• 
• 
• 
• 
• 

<div id="gallery">
    <ul>
        <li> <img src="images/imagen1_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen1.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen2_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen2.jpg" class="pic"  />  </li>
        <li> <img src="images/imagen3_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen3.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen4_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen4.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen5_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen5.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen6_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen6.jpg" class="pic"  />  </li>
        <li> <img src="images/imagen7_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen7.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen8_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen8.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen9_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen9.jpg" class="pic"  />  </li>
        <li> <img src="images/imagen10_small.jpg" class="mini" width="100" height="100"  /> <img src="images/imagen10.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen11_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen11.jpg" class="pic"  /> </li>
        <li> <img src="images/imagen12_small.jpg" class="mini" width="100" height="100" /> <img src="images/imagen12.jpg" class="pic"  /> </li>

 http://vagabundia.blogspot.com/2010/07/otra-galeria-de-imagenes-con-css3.html