Galeria de Fotos

Parte CSS

<style type='text/css'>
#pedrog1{width:1000px; height:200px; border: 1px dashed #0000CC;}
.pedrog2{cursor:default; list-style:none; background:#000000;}
.pedrog2 a{cursor:default; position:relative;}
.pedrog2 a .preview{display:none;}
.pedrog2 a:hover{font-size:100%; z-index:1;}
.pedrog2 a:hover .preview{display:block; position:absolute; top:-33px; left:-45px; z-index:1;}
.pedrog2 img{background:#000000; vertical-align:top; width:80px; height:80px; filter:alpha(opacity=50); border:none;}
.pedrog2 li{background:#000000; display:inline; float:left; margin:3px; padding:5px; position:static;}
.pedrog2 .preview {width:200px; height:150px; filter:alpha(opacity=100)} </style>


Parte HTML

<div id='pedrog1'><br/><br/><br/>
<ul class='pedrog2'>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/01.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/01.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/02.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/02.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/03.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/03.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/04.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/04.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/05.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/05.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/06.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/06.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/07.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/07.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/08.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/08.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/09.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/09.jpg'/>
</a>
</li>
</ul>
</div>



Espero que gostem