CSS Hexagon Grid Image Gallery

CSS Hexagon Grid Image Gallery
Code Snippet:Hexagon Grid
Author: Tiffany Stoik
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 1,028
License: MIT
Edit Code online: View on CodePen
Read More

This code creates an easy to use hexagon shaped grid image gallery. It utilizes CSS to position and style images within hexagonal containers. When you hover over an image, it reveals additional information about the image. This code is helpful for showcasing images in a unique and engaging way on your website.

You can use this code in various web development projects, particularly when you want to showcase a collection of images in a visually striking and unique manner.

How to Create Hexagon Grid Image Gallery in CSS

1. First of all, load the following assets into the head tag of your HTML document.

<link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/80729/helpers.css'>
<link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/80729/atc-fonts.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

2. Create the structure for your hexagonal image gallery. You can customize the content and add more grid items as needed. Here’s a basic example:

<h1>Hexagon Grid</h1>
<div class='grid'>
  <div class='grid--item'>
    <div class='img' style='background-image: url(https://images.unsplash.com/photo-1417436026361-a033044d901f?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;w=1080&amp;fit=max&amp;s=faa4e192f33e0d6b7ce0e54f15140e42);'></div>
    <div class='container'>
      <h2>Snowy Hills</h2>
      <div class='desc'>Photo by Ales Krivec</div>
    </div>
  </div>
  <div class='grid--item'>
    <div class='img' style='background-image: url(https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;w=1080&amp;fit=max&amp;s=49dab7a5e4b2e28b5707bc2db974c94b);'></div>
    <div class='container'>
      <h2>Bear</h2>
      <div class='desc'>Photo by Thomas Lefebvre</div>
    </div>
  </div>
  <div class='grid--item'>
    <div class='img' style='background-image: url(https://images.unsplash.com/photo-1425668273332-3a46ab26b161?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;w=1080&amp;fit=max&amp;s=d453ab3dec298c43415526458b360fa6);'></div>
    <div class='container'>
      <h2>Owl</h2>
      <div class='desc'>Photo by photostockeditor</div>
    </div>
  </div>
  <div class='grid--item'>
    <div class='img' style='background-image: url(https://images.unsplash.com/photo-1423145369430-a9ea0de096cd?crop=entropy&amp;fit=crop&amp;fm=jpg&amp;h=1375&amp;ixjsv=2.1.0&amp;ixlib=rb-0.3.5&amp;q=80&amp;w=1725);'></div>
    <div class='container'>
      <h2>Horse</h2>
      <div class='desc'>Photo by Annie Spratt</div>
    </div>
  </div>
  <div class='grid--item'>
    <div class='img' style='background-image: url(https://images.unsplash.com/photo-1432887382605-0abf9cc49e8f?crop=entropy&amp;fit=crop&amp;fm=jpg&amp;h=1375&amp;ixjsv=2.1.0&amp;ixlib=rb-0.3.5&amp;q=80&amp;w=1725);'></div>
    <div class='container'>
      <h2>Ice & Penguin</h2>
      <div class='desc'>Photo by Teodor Bjerrang</div>
    </div>
  </div>
  <div class='grid--item'>
    <div class='img' style='background-image: url(https://images.unsplash.com/photo-1417026846249-f31f7e43fc35?crop=entropy&amp;fit=crop&amp;fm=jpg&amp;h=1375&amp;ixjsv=2.1.0&amp;ixlib=rb-0.3.5&amp;q=80&amp;w=1725);'></div>
    <div class='container'>
      <h2>Pile of Logs</h2>
      <div class='desc'>Photo by Ales Krivec</div>
    </div>
  </div>
  <div class='grid--item'>
    <div class='img' style='background-image: url(https://images.unsplash.com/uploads/14122811862445bc266cf/931448f2?crop=entropy&amp;fit=crop&amp;fm=jpg&amp;h=1375&amp;ixjsv=2.1.0&amp;ixlib=rb-0.3.5&amp;q=80&amp;w=1725);'></div>
    <div class='container'>
      <h2>Winter Tree</h2>
      <div class='desc'>Photo by Mikael Kristenson</div>
    </div>
  </div>
</div>

Replace your-image-url with the URL of your image. Modify Title and Description to your desired title and description for each grid item.

2. Make sure to include the following CSS code in a separate “styles.css” file (or another name of your choice) and link it in your HTML file.

@import url(https://fonts.googleapis.com/css?family=Arapey:400italic);
body {
  background: #dedede;
  -webkit-font-smoothing: antialiased;
  min-width: 1200px;
}

.grid {
  padding: 60px;
  margin: 0 auto;
  max-width: 1200px;
}

.grid--item {
  position: relative;
  margin-top: -90px;
  margin-right: 5px;
  margin-left: 5px;
  width: calc(33.33% - 10px);
  float: left;
  transition: all 0.5s;
  overflow: hidden;
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  -webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.grid--item:before {
  display: block;
  padding-top: 112.5%;
  content: "";
}
.grid--item:nth-child(1), .grid--item:nth-child(2) {
  margin-top: 0;
}
.grid--item:nth-child(7n-1), .grid--item:nth-child(1) {
  margin-left: 185px;
}

.img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.img:before, .img:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  opacity: 0;
  transition: opacity 0.5s;
}
.img:before {
  background: rgba(128, 0, 128, 0.25);
}
.img:after {
  background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.5), transparent);
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  opacity: 0;
  text-align: center;
  color: white;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate(-50%, -50%) scale(0.9);
  transition: all 0.5s;
  -webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

h1,
h2 {
  font-family: "Arapey";
  font-style: italic;
  font-weight: 400;
}

h1 {
  margin-top: 90px;
  text-align: center;
  font-size: 56px;
  color: #242424;
}

h2 {
  font-size: 32px;
}
h2:before, h2:after {
  display: inline-block;
  margin: 0 0.5em;
  width: 0.75em;
  height: 0.03em;
  background: turquoise;
  content: "";
  vertical-align: middle;
  transition: all 0.3s;
}

.desc {
  margin: 1em 0 0;
  font-family: "ATC Overlook";
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 11px;
  line-height: 1.5;
  color: turquoise;
}

.grid--item:hover .img:before,
.grid--item:hover .img:after,
.grid--item:hover .container {
  opacity: 1;
}
.grid--item:hover .container {
  transform: translate(-50%, -50%) scale(1);
}

That’s it! hopefully, you have successfully created CSS hexagon grid image gallery on your website. You can expand and enhance it by adding more images and adjusting the styling to suit your project’s requirements.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X