Cuadrícula de imágenes usando CSS

Posted on by Rudeus Greyrat

En este artículo, veremos cómo podemos crear una cuadrícula de diamantes usando HTML y CSS. Usaremos la propiedad de posición para alinear imágenes en forma de cuadrícula.

  • Parte HTML del código: en esta sección, crearemos una estructura de nuestra grilla.

    Acercarse:

    1. Cree una lista ordenada usando «ul» y agregue un contenedor de clase.
    2. Cree seis etiquetas «li» con el nombre de la clase.
    3. Incluya una etiqueta «div» con el nombre de clase bg .

    HTML

    <!DOCTYPE html>
    <html>
    <body>
     <!-- container for holding all images -->
    <ul class="container">
    <!-- all li for items -->
     <li class="item1">
        <div class="bg"></div>
      </li>
      <li class="item2">
        <div class="bg"></div>
      </li>
      <li class="item3">
        <div class="bg"></div>
      </li>
      <li class="item4">
        <div class="bg"></div>
      </li>
      <li class="item5">
        <div class="bg"></div>
      </li>
    </ul>
    </body>
    </html>

  • CSS: Usaremos CSS para establecer la posición y asignar algún estilo.

    CSS

    /*<!-- changing background to black -->*/
     *{
      background-color: #000;
     }
     /* setting position of main container
     using general properties of CSS*/
    .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
      padding: 0;
      width: 600px;
      height: 150px;
    }
    /*Assigning transform to each element 
    of container for tilt*/
    .container li {
      list-style: none;
      position: absolute;
      width: 200px;
      height: 200px;
      background: #000;
      transform: rotate(45deg);
      transition: 0.5s;
      margin: -100px;
      overflow: hidden;
      opacity: 0.5;
    }
    /*Set opacity to one on mouse hover*/
    .container li:hover {
      opacity: 1;
    }
    /*Assigning position individually
     to all item of all list*/
    .container li.item1 {
      top: 0;
      left: 0;
    }
    .container li.item2 {
      bottom: 0;
      left: 25%;
    }
    .container li.item3 {
      top: 0;
      left: 50%;
    }
    .container li.item4 {
      bottom: 0;
      left: 75%;
    }
    .container li.item5 {
      top: 0;
      left: 100%;
    }
    /*Assigning transform to each 
    div inside li*/
    .container li .bg {
      width: 100%;
      height: 100%;
      transform: scale(1.1);
    }
    /*Setting background image for every item*/
    .container li.item1 .bg {
      background: url(https://encrypted-tbn0.
                gstatic.com/
               images?q=tbn%3AANd9GcT9lc92L
               Yah9098Udckm8qbObhSx3cq
               TCyEvQ&usqp=CAU);
      background-size: cover;
      background-position: center;
    }
      
    .container li.item2 .bg {
      background: url(https://www.geeksforgeeks.org/
                  wp-content/
                  uploads/gfg_200X200-1.png);
      background-size: cover;
      background-position: center;
    }
      
    .container li.item3 .bg {
      background: url(https://encrypted-tbn0.gstatic.com/
                  images?q=tbn%3AANd9GcT9lc92LYah9098Udc
                  km8qbObhSx3cqTCyEvQ&usqp=CAU);
      background-size: cover;
      background-position: center;
    }
      
    .container li.item4 .bg {
      background: url(https://www.geeksforgeeks.org/
                  wp-content/
                  uploads/gfg_200X200-1.png);
      background-size: cover;
      background-position: center;
    }
      
    .container li.item5 .bg {
      background: url(https://encrypted-tbn0.gstatic.com/
                  images?q=tbn%3AANd9GcT9lc92LYah9098Udc
                  km8qbObhSx3cqTCyEvQ&usqp=CAU);
      background-size: cover;
      background-position: center;
    }

Código completo:

HTML

<!DOCTYPE html>
<html>
    <style>
      
        /* Changing background to black */
        * {
            background-color: #000;
        }
          
        /* setting position of main container 
           using general properties of CSS */
        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: 0;
            padding: 0;
            width: 600px;
            height: 150px;
        }
          
        /* Assigning transform to each element 
          of container for tilt */
        .container li {
            list-style: none;
            position: absolute;
            width: 200px;
            height: 200px;
            background: #000;
            transform: rotate(45deg);
            transition: 0.5s;
            margin: -100px;
            overflow: hidden;
            opacity: 0.5;
        }
        /* Set opacity to one on mouse hover */
        .container li:hover {
            opacity: 1;
        }
        /* Assigning position individually 
           to all item of all list */
        .container li.item1 {
            top: 0;
            left: 0;
        }
  
        .container li.item2 {
            bottom: 0;
            left: 25%;
        }
  
        .container li.item3 {
            top: 0;
            left: 50%;
        }
  
        .container li.item4 {
            bottom: 0;
            left: 75%;
        }
  
        .container li.item5 {
            top: 0;
            left: 100%;
        }
        /* Assigning transform to each div inside li */
        .container li .bg {
            width: 100%;
            height: 100%;
            transform: scale(1.1);
        }
        /* Setting background image for every item */
        .container li.item1 .bg {
            background: url(
https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT9lc92LYah9098Udckm8qbObhSx3cqTCyEvQ&usqp=CAU);
            background-size: cover;
            background-position: center;
        }
  
        .container li.item2 .bg {
            background: url(
https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png);
            background-size: cover;
            background-position: center;
        }
  
        .container li.item3 .bg {
            background: url(
https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT9lc92LYah9098Udckm8qbObhSx3cqTCyEvQ&usqp=CAU);
            background-size: cover;
            background-position: center;
        }
  
        .container li.item4 .bg {
            background: url(
 https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png);
            background-size: cover;
            background-position: center;
        }
  
        .container li.item5 .bg {
            background: url(
https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT9lc92LYah9098Udckm8qbObhSx3cqTCyEvQ&usqp=CAU);
            background-size: cover;
            background-position: center;
        }
    </style>
    <body>
        
        <!-- Container for holding all images -->
        <ul class="container">
            
            <!-- All li for items -->
            <li class="item1">
                <div class="bg"></div>
            </li>
            <li class="item2">
                <div class="bg"></div>
            </li>
            <li class="item3">
                <div class="bg"></div>
            </li>
            <li class="item4">
                <div class="bg"></div>
            </li>
            <li class="item5">
                <div class="bg"></div>
            </li>
        </ul>
    </body>
</html>

Producción:

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *