Galería de imágenes con html y css con bordes y descripción. Simple para mostrar y alinear imágenes en forma horizontal y vertical.
Pega el código de la galería en cualquier widget o post html y listo.
para agregar mas imágenes a la galería: simplemente pega las veces que quieras este bloque abajo de
<body> dentro del código html que sea abajo. (no en <body> de plantilla.
<div class="gallery">
<a href="#" target="_blank">
<img alt="Northern Lights" height="400" src=" https://s3.amazonaws.com/rd-marketing-objects/ebook_blogs-corporativos/viver-de-blog_materiais.png " width="600" />
</a>
<div class="desc">
Descripción</div>
</div>
height="400" = altura de imagen
width="600" = ancho de imagen
<a href="#" target="_blank"> remplaza # por link donde quieras enviar a tus lectores y se abrirá en otra ventana.
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 170px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a href="#" target="_blank">
<img alt="Cinque Terre" height="400" src="https://umbralweb.com/wp-content/uploads/2020/01/Bloggin0005.jpg" width="600" />
</a>
<div class="desc">
Descripcion</div>
</div>
<div class="gallery">
<a href="#" target="_blank">
<img alt="Forest" height="400" src="https://blog.mailrelay.com/wp-content/uploads/2018/03/que-es-un-blog-1.png" width="600" />
</a>
<div class="desc">
Descripcion</div>
</div>
<div class="gallery">
<a href="#" target="_blank">
<img alt="Northern Lights" height="400" src=" https://s3.amazonaws.com/rd-marketing-objects/ebook_blogs-corporativos/viver-de-blog_materiais.png " width="600" />
</a>
<div class="desc">
Descripción</div>
</div>
</body>
</html>
Descripcion
Descripcion
Descripcion