[Hi5-Tutorial] Galerias de imagens

[PunkeCas ®]

Primeira de 4 Galerias

Parte css:

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
.PunkecasG { width:680px; margin:0 auto; text-align:left;}
.PunkecasIM { 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.PunkecasF {position:relative;list-style:none;  width:162px;padding:1px;background:#FF000;margin:0; padding:0; }
.PunkecasF:after {display: block;content: ".";height: 0;font-size:0; visibility: hidden;clear: both;}
ul.PunkecasF li {width:75px;height:50px;float:left; border:1px solid #FF0000;margin:1px; }
ul.PunkecasF li img {border:none; width:75px;height:50px;}
ul.PunkecasF li span img {border:none;width:500px;height:220px;}
ul.PunkecasF a {display: block;}
ul.PunkecasF a span {display: none;}
ul.PunkecasF a:hover span {display: block;position: absolute; top:-5px; left: 177px; background:#FFFFFF;border:1px solid #FF0000;}
</style>

Parte html

Código: [Seleccione]

<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 http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGalemain.jpg para o que querem, as outras são de caras.

[PunkeCas ®]

Segunda de 4 Galerias

IMAGEM TEMPORARIAMANTE INDISPONÍVEL.

Parte css:

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
.a, .a:visited {color:transparent;}
#Submundos {position:relative; width:450px; height:620px; background:transparent; border:4px dashed #FFFFFF; margin:5px auto; background: #FFFFFF url('http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGalemain.jpg')}
a.Submundosg, a.Submundosg:visited {display:inline; color:#000; text-decoration:none; border:1px solid #000000; width:53px; height:53px; float:left; margin:5px 9px; position:relative; cursor:crosshair;filter:Alpha(Opacity=50)}
a.Punkecasa {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasb {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasc {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasd {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecase {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasf {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasg {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecash {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasi {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasj {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecask {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasl {background:url(URL DA IMAGEM DO BOTÃO);}
a.Submundosg span {visibility:hidden; display:block; position:absolute; width:420px; height:450px; top:80px; left:9px; color:#ffffff; background-image:url(URL DO BACKGOUND DAS IMAGENS GRANDES); text-align:center; border:1px solid #ffffff; font-family:tahoma,letter-spacing:1px; cursor:default;background-color:#006666}
a.Punkecas span {left:-1px; top:130px;}
a.Punkecasb span {left:-74px; top:130px;}
a.Punkecasc span {left:-147px; top:130px;}
a.Punkecasd span {left:-220px; top:130px;}
a.Punkecase span {left:-293px; top:130px;}
a.Punkecasf span {left:-366px; top:130px;}
a.Punkecasg span {left:-1px; top:65px;}
a.Punkecash span {left:-74px; top:65px;}
a.Punkecasi span {left:-147px; top:65px;}
a.Punkecasj span {left:-220px; top:65px;}
a.Punkecask span {left:-293px; top:65px;}
a.Punkecasl span {left:-366px; top:65px;}
a.Submundosg:hover {white-space:normal; border:1px solid #fff; z-index:100;filter:none}
a.Submundosg:hover span {visibility:visible; z-index:100;filter:none}
a.Submundosg:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;filter:none}
a.Submundosg:active, a.Submundosg:focus {border:1px dotted #ffff00; z-index:10;filter:none}
a.Submundosg:active span, a.Submundosg:focus span {visibility:visible; z-index:10;display:block}
a.Submundosg:active span img, a.Submundosg:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}
</style>
Parte html:

Código: [Seleccione]

<div id="Submundos">
<a class="Submundosg Punkecasa" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasb" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasc" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
>a class="Submundosg Punkecasd" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecase" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasf" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasg" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecash" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasi" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasj" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecask" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasl" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
</div>

Nota: Na parte html da galeria onde está " href="#" " podem adicionar ai o destino url, onde está "alt="" " podem adicionar uma descrição que aparece quando se coloca o cursor por cima da imagem grande exemplo " alt="Submundos" " onde diz " title="" " podem adicionar o titulo da imagem,l exemplo: " title="Punkecas" "

[pedrol96]

Galeria 1 ( horizontal)

Parte em CSS:

Código: [Seleccione]



 <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 em HTML:

Código: [Seleccione]


<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>





[pedrol96]

Galeria 1 ( vertical)

Parte em CSS:

Código: [Seleccione]



 <style type='text/css'>
#pedrog1{width:210px; height:1005px; 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 em HTML:

Código: [Seleccione]


<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>





[mand]

CSS:

Código: [Seleccione]

<style type="text/css">
#Mand { padding:0; margin:0 auto; list-style-type:none; overflow:hidden; width:495px; height:240px; border:1px solid #888; background:#fff url(http://img514.imageshack.us/img514/9868/fundogaleriaig5.gif);}

#Mand li { float:left;}

#Mand li a { display:block; height:240px; width:28px; overflow:hidden; float:left; text-decoration:none; border-right:1px solid #fff; cursor:default;}

#Mand li a img {border:0;}

#Mand li a:hover { background:#eee; width:320px;}
</style>
HTML:

Código: [Seleccione]

<ul id="Mand">
<li>
<a href="# "><img src="http://www.4winmobile.com/tg/T830/01-320x240.jpg" width="320" height="240" title="Jardim" /></a></li>

<li>
<a href="# "><img src="http://www.fvac.ca/images/320x240.jpg" width="320" height="240" title="Deserto" /></a></li>

<li>
<a href="# "><img src="http://nnmonitors.com/imgs/video/SampleVideo(320x240).jpg" width="320" height="240" title="Smáfro" /></a></li>

<li>
<a href="# "><img src="http://tribulandia.blogspot.com/Wild%20Animal%20180%20(320%20x%20240).jpg" width="320" height="240" title="Jacares" /></a></li>

<li>
<a href="# "><img src="http://ozeascuriosidades.files.wordpress.com/2007/09/animais002.jpg" width="320" height="240"  title="Lobo" /></a></li>

<li><a href="# "><img src="http://br.geocities.com/chapecoutil/imagens/animais.jpg" width="320" height="240" title="Dog" /></a></li>

<li><a href="# "><img src="http://pics.livejournal.com/missiku/pic/00031598/s320x240" width="320" height="240" title="Cat" /></a></li>
</ul>

[pedrol96]

Galeria 2

Parte em CSS:

Código: [Seleccione]

<style type='text/css'>


#container {position:relative; width:680px; height:550px; background:#009900; border:1px solid #000; margin:5px auto; font-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; margin:7px 21px; display:inline; color:#000; text-decoration:none; border:0px dashed #000; width:115px; height:100px; cursor:default; filter:gray;}
#container a.pics img.thumb {display:block; border:0px;}
#container a.pics span {display:none; border:0; width:580px; background:#006600 ; border:0px solid #669900 ; text-align:center; filter:none;}
#container a.pics span img {margin:10px auto; border:0px solid #009900; filter:none;}

#container a.pics:hover {white-space:normal; border:0px; filter:none;}
#container a.pics:hover span {display:block; position:absolute; left:9px; top:300px; z-index:10; height:235px;}

#container a.pics:active {border:0px solid #fc0;}
#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}

#container a.pics:focus {border:0px solid #fc0; outline:0;}
#container a.pics:focus span {display:block; position:absolute; left:9px; top:200px; z-index:5; outline:0;}

#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; width:600px; text-align:center; color:#eee; z-index:1; font-size:13px; font-weight:bold;}
</style>



Parte em HTML:

Código: [Seleccione]


<div id='container'>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/1-2.jpg?t=1235562792'/>
<span><img alt='pedrog96 1' src='http://i400.photobucket.com/albums/pp85/pedrol96/1x.jpg' title='pedrog96 1 big'/><br/>pedrog96 1</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://s400.photobucket.com/albums/pp85/pedrol96/th_2.jpg'/>
<span><img alt='pedrog96 2' src='http://i400.photobucket.com/albums/pp85/pedrol96/2x.jpg?t=1235563294' title='pedrog96 2 big'/><br/>pedrog96 2</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/3.jpg?t=1235564491'/>
<span><img alt='pedrog 3' src='http://i400.photobucket.com/albums/pp85/pedrol96/3x.jpg?t=1235564525' title='pedrog96 3 big'/><br/>pedrog96 3</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/4.jpg?t=1235566752'/>
<span><img alt='pedrog 4' src='http://i400.photobucket.com/albums/pp85/pedrol96/4x.jpg?t=1235566811' title='pedrog96 4 big'/><br/>pedrog96 4</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/5.jpg?t=1235568208'/>
<span><img alt='pedrog 5' src='http://i400.photobucket.com/albums/pp85/pedrol96/5x.jpg?t=1235568210' title='pedrog96 5 big'/><br/>pedrog96 5</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/6.jpg?t=1235568375'/>
<span><img alt='pedrog 6' src='http://i400.photobucket.com/albums/pp85/pedrol96/6x.jpg?t=1235568376' title='pedrog96 6 big'/><br/>pedrog96 6</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/7.jpg?t=1235568417'/>
<span><img alt='pedrog 7' src='http://i400.photobucket.com/albums/pp85/pedrol96/7x.jpg?t=1235568418' title='pedrog96 7 big'/><br/>pedrog96 7</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/8.jpg?t=1235568519'/>
<span><img alt='pedrog 8' src='http://i400.photobucket.com/albums/pp85/pedrol96/8x.jpg?t=1235568522' title='pedrog96 8 big'/><br/>pedrog96 8</span>
</a>



<span class='info'><img src='http://s400.photobucket.com/albums/pp85/pedrol96/th_submundos.jpg'/><br/>
optimizado por Pedrog96</span>
</div>



Ainda tem muitas coisas imperfeitas, que serão aprefeiçoadas brevemente :D

Nota: Para a galeria ficar com mais de oito imagens teriam qe alterar várias medidas de altura dos objectos.

[PunkeCas ®]

...

[pedrol96]

Galeria 3

fonte: http://project47.viscountbox.com/galeria-de-imagens-com-css/

Parte em CSS:

Código: [Seleccione]


<style type='text/css'>
* {
margin: 0;
padding: 0;
}
HTML, body {
font: 11px "Trebuchet MS", Arial, sans-serif;
}
h1 {
margin-bottom: 5px;
font-size: 1.4em;
text-transform: uppercase;
}
img {
border: 2px solid #666;
}
#galeria {
position: relative;
width: 304px;
margin: 1em auto;
padding: 5px;
background: #cacaca;
}
#galeria span.legenda {
display: block;
width: 296px;
padding: 2px;
background: #CACACA;
font-style: italic;
text-align: left;
}
#galeria ul#thumbs {
clear: both;
padding: 5px;
text-align: center;
list-style: none;
}
#galeria ul#thumbs li {
display: inline;
margin: 0 3px;
}
#galeria ul#thumbs li a {
text-decoration: none;
}
#galeria ul#thumbs li a img.full,
#galeria ul#thumbs li a span.legenda {
position: absolute;
visibility: hidden;
left: 5px;
}
#galeria ul#thumbs li a img.full {
top: 30px;
cursor: default;
}
#galeria ul#thumbs li a span.legenda {
top: 188px;
color: #000;
cursor: text;
}
#galeria ul#thumbs li a:active img.full,
#galeria ul#thumbs li a:focus img.full,
#galeria ul#thumbs li a:active span.legenda,
#galeria ul#thumbs li a:focus span.legenda {
visibility: visible;
}
</style>


Parte em HTML:

Código: [Seleccione]


<!-- www.submundos.com -->
<!-- abre galeria -->
  <div id="galeria">
  <h1><center>Galeria</center></h1>

<!-- abre imagem e legenda default -->
    <img src="http://i400.photobucket.com/albums/pp85/pedrol96/foto1.jpg" alt="Foto de Curitiba" />
    <span class="legenda">Rua 24 horas</span>
<!-- fecha imagem e legenda default -->
    <ul id="thumbs">
      <li>
        <a href="#nada" title="Visualizar imagem">
          <img src="http://i400.photobucket.com/albums/pp85/pedrol96/foto1_thumb.jpg" alt="Preview da imagem" />
          <img class="full" src="http://i400.photobucket.com/albums/pp85/pedrol96/foto1.jpg" alt="Foto de Curitiba" />
          <span class="legenda">Rua 24 horas</span>
        </a>
      </li>
      <li>
        <a href="#nada" title="Visualizar imagem">
          <img src="http://i400.photobucket.com/albums/pp85/pedrol96/foto2_thumb.jpg" alt="Preview da imagem" />
          <img class="full" src="http://i400.photobucket.com/albums/pp85/pedrol96/foto2.jpg" alt="Foto de Curitiba" />
          <span class="legenda">Palácio Avenida</span>
        </a>
      </li>
      <li>
        <a href="#nada" title="Visualizar imagem">
          <img src="http://i400.photobucket.com/albums/pp85/pedrol96/foto3_thumb.jpg" alt="Preview da imagem" />
          <img class="full" src="http://i400.photobucket.com/albums/pp85/pedrol96/foto3.jpg" alt="Foto de Curitiba" />
          <span class="legenda">Bosques</span>
        </a>
      </li>
    </ul>
  </div>
<!-- fecha galeria -->



[PunkeCas ®]

Qaundo o que postam não é da vossa autoria agradecia que colocasem a fonte!

http://project47.viscountbox.com/galeria-de-imagens-com-css/...

[El Negro]

Segunda de 4 Galerias

IMAGEM TEMPORARIAMANTE INDISPONÍVEL.

Parte css:

Código: [Seleccione]

<style type="text/css">
<!-- www.submundos.com/forum -->
.a, .a:visited {color:transparent;}
#Submundos {position:relative; width:450px; height:620px; background:transparent; border:4px dashed #FFFFFF; margin:5px auto; background: #FFFFFF url('http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGalemain.jpg')}
a.Submundosg, a.Submundosg:visited {display:inline; color:#000; text-decoration:none; border:1px solid #000000; width:53px; height:53px; float:left; margin:5px 9px; position:relative; cursor:crosshair;filter:Alpha(Opacity=50)}
a.Punkecasa {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasb {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasc {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasd {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecase {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasf {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasg {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecash {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasi {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasj {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecask {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasl {background:url(URL DA IMAGEM DO BOTÃO);}
a.Submundosg span {visibility:hidden; display:block; position:absolute; width:420px; height:450px; top:80px; left:9px; color:#ffffff; background-image:url(URL DO BACKGOUND DAS IMAGENS GRANDES); text-align:center; border:1px solid #ffffff; font-family:tahoma,letter-spacing:1px; cursor:default;background-color:#006666}
a.Punkecas span {left:-1px; top:130px;}
a.Punkecasb span {left:-74px; top:130px;}
a.Punkecasc span {left:-147px; top:130px;}
a.Punkecasd span {left:-220px; top:130px;}
a.Punkecase span {left:-293px; top:130px;}
a.Punkecasf span {left:-366px; top:130px;}
a.Punkecasg span {left:-1px; top:65px;}
a.Punkecash span {left:-74px; top:65px;}
a.Punkecasi span {left:-147px; top:65px;}
a.Punkecasj span {left:-220px; top:65px;}
a.Punkecask span {left:-293px; top:65px;}
a.Punkecasl span {left:-366px; top:65px;}
a.Submundosg:hover {white-space:normal; border:1px solid #fff; z-index:100;filter:none}
a.Submundosg:hover span {visibility:visible; z-index:100;filter:none}
a.Submundosg:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;filter:none}
a.Submundosg:active, a.Submundosg:focus {border:1px dotted #ffff00; z-index:10;filter:none}
a.Submundosg:active span, a.Submundosg:focus span {visibility:visible; z-index:10;display:block}
a.Submundosg:active span img, a.Submundosg:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}
</style>
Parte html:

Código: [Seleccione]

<div id="Submundos">
<a class="Submundosg Punkecasa" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasb" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasc" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
>a class="Submundosg Punkecasd" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecase" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasf" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasg" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecash" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasi" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasj" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecask" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasl" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
</div>

Nota: Na parte html da galeria onde está " href="#" " podem adicionar ai o destino url, onde está "alt="" " podem adicionar uma descrição que aparece quando se coloca o cursor por cima da imagem grande exemplo " alt="Submundos" " onde diz " title="" " podem adicionar o titulo da imagem,l exemplo: " title="Punkecas" "

2 erros Punkecas! Tome nota:

              CSS
1. Falta "a" no "Punkecas" uma vez q deste "Punkecasa" como class

a.Punkecas span {left:-1px; top:130px;}   


              HTML
2.  Erro no 1º sinal ">"

>a class="Submundosg Punkecasd" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span>[/url]

 

[Filipegr]

Sem o Rato Por Cima:


Com o Rato Por cima:

Parte Css:

Código: [Seleccione]

<style type="text/css">
.filipegr{padding-top:9px;width:170px; height:300px; background: transparent url(http://i518.photobucket.com/albums/u348/filipegr1992/optimizadoporfilipegr.jpg);}
.filipegr .filipe a {position:relative; left:9px;display:block; height:20px; width:150px; overflow:hidden;text-decoration:none; border:none; border: 1px solid #FFF !important;}
.filipegr .filipe a img{ border:none;}
.filipegr .filipe a:hover img{filter:alpha(opacity=50); opacity:0.5;}
.filipegr .filipe a:hover { height:180px; background-image: url(http://i518.photobucket.com/albums/u348/filipegr1992/submundoscomgaleira.jpg); border: 1px dashed Black !important;}
</style>

Parte Html:

Código: [Seleccione]

<div class="filipegr">
<div class="filipe"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"  /></a></div>
<div class="filipe"><a href="# "><img src="URL DA IMAGEM" width="150" height="180"  /></a></div>
<div class="filipe"><a href="# "><img src="URL DA IMAGEM" width="150" height="180" /></a></div>
<div class="filipe"><a href="# "><img src="URL DA IMAGEM" width="150" height="180"  /></a></div>
<div class="filipe"><a href="# "><img src="URL DA IMAGEM" width="150" height="180"  /></a></div>
<div class="filipe"><a href="# "><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
</div>

Ps: As Imagens devem ter o tamanho conforme os "width" e "height"...