Image Grid using CSS - GeeksforGeeks

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.HTMLHTML<!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>
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.
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.CSSCSS/*<!-- 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;}
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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Basics
HTML-Basics
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)