CSS | galería de imágenes – Barcelona Geeks

La Galería de imágenes se utiliza para almacenar y mostrar una colección de imágenes. Este ejemplo crea una galería de imágenes receptiva usando HTML y CSS.

Pasos 1: Creación de una estructura de galería básica

Cada galería contiene un número de secciones div.
Cada sección div contiene una imagen y su descripción.

<div class="gallery">
  <div class="box"> 
    <div class="image"> Image Added Here </div>
    <div class="text"> Text Added Here  </div>
  </div>

Pasos 2: Diseñar el archivo usando CSS

Estilo del contenedor de la galería:
- Establezca la propiedad de visualización en flex. Significa que los elementos dentro del contenedor de la galería tendrán un contexto flexible.
- Establezca la propiedad de flujo flexible en ajuste de fila. Establece la dirección de flexión y el estilo de envoltura de flexión.
```
.gallery {
  width:100%;
  display:flex;
  flex-flow: row wrap;
}
```

Estilo de la caja:

.box {
    flex-basis: 20%;
    width: 100%;
    padding: 10px;
    margin: 8px;
    
    // Set the blur shadow
    box-shadow: 1px 1px 15px 1px green; 
}

Pasos 3: use la consulta @media para crear una galería de imágenes receptivas.

@media only screen and (max-width: 300px) { 
.box {
    flex-basis: 100%;
}

Ejemplo:

<!DOCTYPE html>
<html>
      
<head>
    <style>
      
        /* style to set body of page */
        body {
            width:100%; 
            margin:auto;
        }
        .gallery {
            width:100%;
            display:flex;
            flex-flow: row wrap;
        }
        .box {
            flex-basis:20%;
            width:100%;
            padding:10px;
            margin:8px;
            box-shadow: 1px 1px 1px 1px green;
        }
        .text {
            text-align:center;
            margin-top:5px;
        }
        .image:hover {
            border: 3px solid green;
        }
          
        /* media query used here */
        @media only screen and (max-width: 300px) { 
            .box {
                flex-basis: 100%;
            }
        }
          
        @media only screen and (max-width:500px) {
            .box {
                flex-basis: 40%;
            }
        }
    </style>
</head>
  
<body>
    <div class = "gallery">
        <div class = "box">
            <div class = "image">
                <a target="_blank" href=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeek.png">
                    <img src =
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeek.png" 
                width = "300" height = "300">
                </a>
            </div>
              
            <div class = "text">
                Geeks Classes Image
            </div>
        </div>
      
        <div class = "box">
            <div class = "image">
                <a target="_blank" href=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-22.png">
                    <img src =
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-22.png"
                width = "300" height = "300">
                </a>
            </div>
              
            <div class = "text">
                GeekforGeeks Image
            </div>
        </div>
          
        <div class = "box">
            <div class = "image">
                <a target="_blank" href=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png">
                    <img src = 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png" 
                width = "300" height = "300">
                </a>
            </div>
              
            <div class = "text">
                Geeks Image
            </div>
        </div>
</body>
  
</html>

Producción:
galería de imágenes

Publicación traducida automáticamente

Artículo escrito por ApoorvaSaxena2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta