46- Galeria de imagenes con CSS

Jorge Catalao enero 12, 2025
HTML


Tema 1: Galería de Imágenes con CSS

Una galería de imágenes con CSS te permite organizar y mostrar imágenes de manera visualmente atractiva. Puedes lograrlo utilizando propiedades como display: grid o flexbox para crear una estructura ordenada.

En el siguiente ejemplo, se utiliza display: grid para crear una cuadrícula que se ajusta a diferentes tamaños de pantalla, lo que mejora la experiencia de usuario:


/* Estilos para la galería */
.galeria-imagenes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.galeria-imagenes img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

Este código crea una galería de imágenes que se adapta automáticamente al tamaño de la pantalla, mostrando varias imágenes en una cuadrícula. Asegúrate de agregar imágenes con la etiqueta <img> dentro de un contenedor con la clase galeria-imagenes.

Volver al índice 


    <!DOCTYPE html>
    <html lang="es">
    <head>
    <style>
    /* Estilo para la galería */
    div.gallery {
      margin: 5px;
      border: 1px solid #ccc;
      float: left;
      width: 200px;  /* Ancho fijo */
    }
    
    div.gallery:hover {
      border: 1px solid #777;
    }
    
    /* Estilo para las imágenes dentro de la galería */
    div.gallery img {
      width: 100%;
      height: 200px;  /* Altura fija para que todas las imágenes sean iguales */
      object-fit: cover;  /* Asegura que las imágenes no se deformen */
    }
    
    /* Estilo para la descripción debajo de las imágenes */
    div.desc {
      padding: 15px;
      text-align: center;
    }
    </style>
    </head>
    <body>
    
    <!-- Primer card con imagen -->
    <div class="gallery">
      <a target="_blank" href="https://cdn.pixabay.com/photo/2024/11/21/22/06/deer-9214838_1280.jpg">
        <img src="https://cdn.pixabay.com/photo/2024/11/21/22/06/deer-9214838_1280.jpg" alt="Ciervo en el bosque">
      </a>
      <div class="desc">Ciervo en el bosque</div>
    </div>
    
    <!-- Segundo card con imagen -->
    <div class="gallery">
      <a target="_blank" href="https://cdn.pixabay.com/photo/2022/02/07/22/39/nature-7000445_1280.jpg">
        <img src="https://cdn.pixabay.com/photo/2022/02/07/22/39/nature-7000445_1280.jpg" alt="Bosque en invierno">
      </a>
      <div class="desc">Bosque en invierno</div>
    </div>
    
    <!-- Tercer card con imagen -->
    <div class="gallery">
      <a target="_blank" href="https://cdn.pixabay.com/photo/2017/03/04/07/00/european-bee-eater-2115564_1280.jpg">
        <img src="https://cdn.pixabay.com/photo/2017/03/04/07/00/european-bee-eater-2115564_1280.jpg" alt="Abejaruco europeo">
      </a>
      <div class="desc">Abejaruco europeo</div>
    </div>
    
    <!-- Cuarto card con imagen -->
    <div class="gallery">
      <a target="_blank" href="https://cdn.pixabay.com/photo/2020/04/06/19/47/easter-eggs-5011031_1280.jpg">
        <img src="https://cdn.pixabay.com/photo/2020/04/06/19/47/easter-eggs-5011031_1280.jpg" alt="Huevos de pascua">
      </a>
      <div class="desc">Huevos de pascua</div>
    </div>
    
    </body>
    </html>


...

Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias