Skip to content
Related Articles

Related Articles

Improve Article

Image Grid using CSS

  • Last Updated : 02 Nov, 2020

In this article, we will see how can we create a Diamond Grid using HTML and CSS. We will use position property to align images in a grid form.

  • HTML part of code: In this section, we will create a structure of our grid.

    Approach:

    1. Create an ordered list using “ul” and add a class container.
    2. Create six “li” tags with class name.
    3. Include a “div” tag with class name 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: We will use CSS for setting position and assigning some style.



    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;
    }

Complete Code:

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(
            background-size: cover;
            background-position: center;
        }
  
        .container li.item2 .bg {
            background: url(
            background-size: cover;
            background-position: center;
        }
  
        .container li.item3 .bg {
            background: url(
            background-size: cover;
            background-position: center;
        }
  
        .container li.item4 .bg {
            background: url(
            background-size: cover;
            background-position: center;
        }
  
        .container li.item5 .bg {
            background: url(
            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>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :