Galería de imágenes CSS
A continuación se muestra cómo crear una galería de imágenes con CSS:
Añade aquí la descripción del texto de la imagen
Añade aquí la descripción del texto de la imagen
Añade aquí la descripción del texto de la imagen
Añade aquí la descripción del texto de la imagen
Galería de imágenes
A continuación se muestra cómo crear una galería de imágenes con CSS:
Ejemplos
<div class="responsive">
<div class="img">
<a target="_blank" href="http://static.example.com/images/demo/demo1.jpg">
<img src="http://static.example.com/images/demo/demo1.jpg" alt="Descripción del texto de la imagen" width="300" height="200">
</a>
<div class="desc">Añade aquí la descripción del texto de la imagen</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="http://static.example.com/images/demo/demo2.jpg">
<img src="http://static.example.com/images/demo/demo2.jpg" alt="Descripción del texto de la imagen" width="300" height="200">
</a>
<div class="desc">Añade aquí la descripción del texto de la imagen</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="http://static.example.com/images/demo/demo3.jpg">
<img src="http://static.example.com/images/demo/demo3.jpg" alt="Descripción del texto de la imagen" width="300" height="200">
</a>
<div class="desc">Añade aquí la descripción del texto de la imagen</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="http://static.example.com/images/demo/demo4.jpg">
<img src="http://static.example.com/images/demo/demo4.jpg" alt="Descripción del texto de la imagen" width="300" height="200">
</a>
<div class="desc">Añade aquí la descripción del texto de la imagen</div>
</div>
</div>
Pruébalo »
Más ejemplos
Galería de imágenes responsive
Utiliza las consultas de medios de CSS3 para crear una galería de imágenes responsive:
<div class="responsive">
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="http://www.example.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Añade aquí la descripción del texto de la imagen</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="http://www.example.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Añade aquí la descripción del texto de la imagen</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="http://www.example.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Añade aquí la descripción del texto de la imagen</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="http://www.example.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Añade aquí la descripción del texto de la imagen</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<h4>Redimensiona la ventana del navegador para ver el efecto</h4>
</div>
Pruébalo »