Hexagon Image Gallery in HTML and CSS
Would you like to design an impressive and hexagon image gallery for your online presence? Look no further! A Hexagon Image Gallery in HTML and CSS will be presented in this article to offer an attractive solution for displaying your images.
I plan to give you free source code to add it to your website whether you choose WordPress or a custom HTML platform.
GitHub Source: Hexagon Image Gallery
This piece serves as a guide to aid in creating a striking gallery with hexagons that will draw attention to your site.
Let’s get started!
Features
Here are some of the key features of the source code:
- Responsive design: The gallery responds to different display dimensions for convenient use on a range of devices.
- Easy to customize: The gallery can be adapted to your website’s theme via easy color and image size changes.
- Lightweight and fast: By relying on HTML and CSS only the gallery provides fast loading experiences. Compatible with all modern CMS: This gallery runs smoothly on all platforms including your preferred CMS WordPress Joomla or a custom HTML interface.
Here is complete project: Google Drive Direct Download Link Generator Tool
Technologies Used
- HTML
- CSS
Video Preview
Steps to Build Gallery
Creating a Hexagon Image Gallery in HTML, CSS is very simple if you follow these steps:
- Create a project folder: Create a project directory in your computer to hold all your files. Choose the name ‘Hexagon Gallery‘ to keep everything in order.
- Create an images folder: In the project folder make a new folder labeled images to contain the images you want to display in the gallery.
- Create the index.html file: Create an index.html file in your project folder as HTML. This file will have the format and design for your hexagon gallery.
- Create the style.css file: Within the same folder make a CSS file named style.css. This document features styling instructions for hexagon design with hover effects and positioning.
HTML
Here is the HTML code for your index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hexagon Image Gallery | JV Codes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Hexagon Image Gallery Container -->
<div class="gallery">
<!-- Image 1 with hexagonal clipping -->
<div class="clipped-border">
<img src="images/kid1.jpg" id="clipped" alt="Kid 1">
</div>
<!-- Image 2 with hexagonal clipping -->
<div class="clipped-border">
<img src="images/kid2.jpg" id="clipped" alt="Kid 2">
</div>
<!-- Image 3 with hexagonal clipping -->
<div class="clipped-border">
<img src="images/kid3.jpg" id="clipped" alt="Kid 3">
</div>
<!-- Image 4 with hexagonal clipping -->
<div class="clipped-border">
<img src="images/kid4.jpg" id="clipped" alt="Kid 4">
</div>
<!-- Image 5 with hexagonal clipping -->
<div class="clipped-border">
<img src="images/kid5.jpg" id="clipped" alt="Kid 5">
</div>
<!-- Optional shadow effect for the gallery -->
<div class="shadow"></div>
</div>
</body>
</html>
CSS
Here is the complete code for style.css file to style the gallery.
:root{
--width: 100%;
--height: 100%;
--border-width: 200px;
--border-height: 200px;
}
html,body{
background:radial-gradient(rgb(167, 167, 167),rgb(192, 196, 255));
height:100%;
width:100%;
position:relative;
overflow:hidden;
}
.gallery{
position:relative;
height:100%;
width:100%;
margin: 200px;
}
.gallery:after{
content:'';
}
.shadow{
position: absolute;
top: 500px;
left: 100px;
width: 500px;
height: 40px;
border-radius: 50%;
background: radial-gradient(#805d78,rgba(0,0,0,0) 70%);
}
img{
width:var(--width);
height:var(--height);
}
.clipped-border{
-webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
padding:5px;
background:linear-gradient(grey,lightgrey);
width:var(--border-width);
height:var(--border-height);
max-height:250px;
max-width:250px;
height: var(--height);
width:var(--width);
transition:transform 0.2s;
position:absolute;
cursor:pointer;
}
.clipped-border:before{
content:'';
position:absolute;
opacity:0.5;
width:350px;
height:70px;
background:white;
top:0;
left:0;
z-index:1;
transform:rotate(45deg);
transition:transform 0.5s;
}
.clipped-border:hover:before{
transform: translate(-100px,400%) rotate(45deg);
transition:transform 0.5s;
}
.clipped-border:nth-child(2){
top:196px;
left:118px;
}
.clipped-border:nth-child(3){
top:0;
left:235px;
}
.clipped-border:nth-child(4){
top:196px;
left:353px;
}
.clipped-border:nth-child(5){
top:0;
left:470px;
}
#clipped {
-webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}
.clipped-border:hover{
transform:scale(1.2);
transition:transform 0.2s;
z-index:10;
}
@media screen and (max-width:500px){
.clipped-border{
width:100px;
height:100px;
}
.clipped-border:nth-child(2){
top:0;
left:100px;
}
.clipped-border:nth-child(3){
left:200px;
}
.clipped-border:nth-child(4){
top:82px;
left:50px;
}
.clipped-border:nth-child(5){
top:82px;
left:150px;
}
}
Download Source Code
I offer all the source code for the Hexagon Image Gallery written in HTML and CSS without charge. The code does not require a license to use and makes it accessible for personal and commercial projects. You’ll get all important files such as HTML, CSS and images.
Conclusion
By using HTML and CSS for the Hexagon Image Gallery you can frame images beautifully on your website in a stylish and innovative manner. You can effortlessly develop an impressive gallery using this code. I suggest you to use this code on your sites and remember to give a shout-out to JV Source Codes.
Also Check These Image Galleries:
