Diamond Shaped Image Gallery in HTML and CSS | Project Series Day - 18 | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made a Dailmond image gallery with the help of HTML and CSS. It is Project Series Day 18. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this simple image gallery step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
In HTML we have put the each box in ul so it becomes easier to design it.
<ul class="main-nav">
<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>After the HTML we will design the container, each box's shape diamond, and styling.
CSS🎈( step - 2)
* {
margin: 0;
padding: 0;
background-color: #000;
font-family: poppins, sans-serif;
}
.main-nav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
width: 600px;
height: 150px;
}
.main-nav li {
list-style: none;
position: absolute;
width: 200px;
height: 200px;
background: #000;
transform: rotate(45deg);
transition: 0.5s;
margin: -100px;
overflow: hidden;
opacity: 0.6;
}
.main-nav li:hover {
opacity: 1;
}
.main-nav li.item1 {
top: 0;
left: 0;
}
.main-nav li.item2 {
bottom: 0;
left: 25%;
}
.main-nav li.item3 {
top: 0;
left: 50%;
}
.main-nav li.item4 {
bottom: 0;
left: 75%;
}
.main-nav li.item5 {
top: 0;
left: 100%;
}
.main-nav li .bg {
width: 100%;
height: 100%;
transform: scale(1.1);
}
.main-nav li.item1 .bg {
background: url(https://images.unsplash.com/photo-1636900741619-97032a3d4794?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1084&q=80);
background-size: cover;
background-position: center;
}
.main-nav li.item2 .bg {
background: url(https://images.unsplash.com/photo-1607707053756-210e12af7ab3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80);
background-size: cover;
background-position: center;
}
.main-nav li.item3 .bg {
background: url(https://images.unsplash.com/photo-1631112214068-25d3f2acee1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80);
background-size: cover;
background-position: center;
}
.main-nav li.item4 .bg {
background: url(https://images.unsplash.com/photo-1628143651406-04c07dbde4be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80);
background-size: cover;
background-position: center;
}
.main-nav li.item5 .bg {
background: url(https://images.unsplash.com/photo-1622645615869-9c144a19d7e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=413&q=80);
background-size: cover;
background-position: center;
}
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.
Hey, this is such a great article! Thanks for sharing. Our team will be excited to read this. We are Mobile App Development Company and we regularly also express our views on mobile app development. Do visit our website for more related content.
ReplyDelete