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 --><ulclass="container"><!-- all li for items --><liclass="item1"><divclass="bg"></div></li><liclass="item2"><divclass="bg"></div></li><liclass="item3"><divclass="bg"></div></li><liclass="item4"><divclass="bg"></div></li><liclass="item5"><divclass="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 containerusing 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 elementof 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 individuallyto 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 eachdiv inside li*/.container li .bg {width:100%;height:100%;transform: scale(1.1);}/*Setting background image for every item*/.container li.item1.bg {gstatic.com/images?q=tbn%3AANd9GcT9lc92LYah9098Udckm8qbObhSx3cqTCyEvQ&usqp=CAU);background-size: cover;background-position:center;}.container li.item2.bg {wp-content/uploads/gfg_200X200-1.png);background-size: cover;background-position:center;}.container li.item3.bg {images?q=tbn%3AANd9GcT9lc92LYah9098Udckm8qbObhSx3cqTCyEvQ&usqp=CAU);background-size: cover;background-position:center;}.container li.item4.bg {wp-content/uploads/gfg_200X200-1.png);background-size: cover;background-position:center;}.container li.item5.bg {images?q=tbn%3AANd9GcT9lc92LYah9098Udckm8qbObhSx3cqTCyEvQ&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: