CSS IMAGENES: Galería de imágenes con CSS y texto resaltado

Galería

sto que vemos en esta publicación, es una pequeña galería que podemos añadir al footer o alguna página estática.

o hay límite de imágenes y aunque en el ejemplo el borde es de color gris en cualquier blog las imágenes se mostrarán con el borde que tengamos definido para las imágenes de los post, si no tuviéramos borde entonces se mostraría tal y como vemos en el ejemplo.

Procedimiento

os estilos los añadiremos en nuestra plantilla, justo antes de ]]></b:skin>


#galeria ul {
 overflow: hidden;
 padding-top: 5px;
}
#galeria ul li {
 display: inline;
}
#galeria ul li a {
 display: block;
 float: left;
 width: 200px;
 margin: 0 10px 20px;
}
#galeria ul li a img {
 display: block;
 width: 200px;
 height: 125px;
 margin: -5px 0 0 -5px;
 border: 5px solid rgb(250, 250, 250);
}
#galeria ul li a:hover img, #galeria ul li a:focus img {
 border-color: rgb(235, 235, 235);
}
#galeria ul li a:active img {
 margin: -4px 0 -1px -5px;
}
#galeria ul li a span {
 width: 195px;
 position:relative;





height: 20px;
 display: block;
 color: rgb(242, 242, 242);
 font-size: 15px;
 line-height: 18px;
 letter-spacing: 0px;
 word-spacing: 3px;
 text-transform: uppercase;
 padding: 2px;
 background-color: #191919;
 margin-top: -30px;
 text-indent: 4px;
 /*+opacity:70%;*/
 filter: alpha(opacity=70);
 -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
 -moz-opacity: 0.7;
 opacity: 0.7;
}
#galeria ul li.newfaces-icon a span {
 display: none;
}
#galeria ul li a:hover span, #galeria ul li a:focus span {
 color: rgb(205, 72, 72);
}

el HTML allí donde deseamos mostrarlo.


<section id="galeria">
<ul>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
<li>
<a title=""href="URL-ENLACE"><img alt="foto" src="URL-IMAGEN"/><span>Título</span></a>
</li>
</ul>
</section>

onde URL-IMAGEN lo sustituimos por la url de nuestra imagen a mostrar, en Título añadimos el texto y en URL-ENLACE es el espacio para añadir la url del sitio si deseamos que la imagen sea un enlace.