seguinte »

[pmfpinho]

Parte css:

Código:

<style type="text/css">
.PauloPinhoG { width:680px; margin:0 auto; text-align:left;}
.PauloPinhoIM { background: #FFFFFF url('http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGalemain.jpg') center no-repeat;
width:500px; height:220px; position:relative; top:-1px;float:right; border:1px solid #FF0000;}
ul.PauloPinhoF {position:relative;list-style:none;  width:162px;padding:1px;background:#FF000;margin:0; padding:0; }
.PauloPinhoF:after {display: block;content: ".";height: 0;font-size:0; visibility: hidden;clear: both;}
ul.PauloPinhoF li {width:75px;height:50px;float:left; border:1px solid #FF0000;margin:1px; }
ul.PauloPinhoF li img {border:none; width:75px;height:50px;}
ul.PauloPinhoF li span img {border:none;width:500px;height:220px;}
ul.PauloPinhoF a {display: block;}
ul.PauloPinhoF a span {display: none;}
ul.PauloPinhoF a:hover span {display: block;position: absolute; top:-5px; left: 177px; background:#FFFFFF;border:1px solid #FF0000;}
</style>

Parte html

Código:

<div class="PunkecasG"><div class="PunkecasIM"></div><ul class="PunkecasF">
<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal1.jpg" alt="Descrição 1" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal1.jpg" alt="Descrição 1"  /></span></a></li>

<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal2.jpg" alt="Descrição 2" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal2.jpg" alt="Descrição 2"  /></span></a></li>
   
<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal3.jpg" alt="Descrição 3" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal3.jpg" alt="Descrição 3"  /></span></a></li>
   
<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal4.jpg" alt="Descrição 4" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal4.jpg" alt="Descrição 4"  /></span></a></li>
   
<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal5.jpg" alt="Descrição 5" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal5.jpg" alt="Descrição 5"  /></span></a></li>

<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal6.jpg" alt="Descrição 6" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal6.jpg" alt="Descrição 6"  /></span></a></li>
 
<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal7.jpg" alt="Descrição 7" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal7.jpg" alt="Descrição 7"  /></span></a></li>

<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal8.jpg" alt="Descrição 8" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal8.jpg" alt="Descrição 8"  /></span></a></li></ul></div>

Nota: Para alterar imagem inicial --> ir á parte css e mudar o url