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:

Create an ordered list using “ul” and add a class container.
Create six “li” tags with class name.
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:

Suggest improvement

CSS Grid Items

Share your thoughts in the comments

Image Grid using CSS

HTML

CSS

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?