Open In App

Image Grid using CSS

Last Updated : 02 Nov, 2020
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

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(
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>

Output:


N
NANDINIJAIN
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox