GALERIAS DE IMAGENES CON TEXTO AL PIE
Esto que vemos no es más que un pasatiempo de esos que surgen a raíz de algo que vemos y decidimos probar, el resultado es una pequeña galería que podemos añadir al footer o alguna página estática.
No 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.
PC
Teclado
Bola con portatiles
Portatiles y muñeco
Portatiles
Chica en mapa informatico
Cara abstracta
Imagen retro
Los estilos los añadiremos 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);
}
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);
}
Y 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>
Donde 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.
Las imágenes miden 200 x 150 las del ejemplo
Fecha:20/12/2016
Publicado por:
Fecha:20/12/2016
Publicado por:
0 comentarios