Responsive Honeycomb Grid Layout

RH Suman
June 23, 2022

49

A cool hexagonal grid for image and text made in CSS and HTML. The grid shows images by default but once you hover over it reveals the text, with enough space for a short title on small screens and a title with description in bigger screens. A pen created by codepen user web-tiki.
Responsive Honeycomb Grid Layout

HTML Code:-

<ul class="honeycomb">
    <li class="honeycomb-cell">
        <img class="honeycomb-cell_img" src="img/work-1.jpg">
        <div class="honeycomb-cell_title">Web Design</div>
    </li>
    <li class="honeycomb-cell">
        <img class="honeycomb-cell_img" src="img/work-2.jpg">
        <div class="honeycomb-cell_title">Graphic Design</div>
    </li>
    <li class="honeycomb-cell">
        <img class="honeycomb-cell_img" src="img/Work3.jpg">
        <div class="honeycomb-cell_title">Illustration</div>
    </li>
    <li class="honeycomb-cell">
        <img class="honeycomb-cell_img" src="img/work4.jpg">
        <div class="honeycomb-cell_title">Motion Graphics</div>
    </li>
    <li class="honeycomb-cell">
        <img class="honeycomb-cell_img" src="img/work5.jpg">
        <div class="honeycomb-cell_title">3D<small>Animation</small></div>
    </li>
    <li class="honeycomb-cell">
        <img class="honeycomb-cell_img" src="img/work06.jpg">
        <div class="honeycomb-cell_title">Cinematic<small>4D</small></div>
    </li>
    <li class="honeycomb-cell">
        <img class="honeycomb-cell_img" src="img/work07.jpg">
        <div class="honeycomb-cell_title">Share Design</div>
    </li>
    <li class="honeycomb-cell honeycomb_Hidden">
    </li>
</ul>

CSS Code:-

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body 
{
  font-family: 'Poppins', sans-serif;
  background: #111111;
}
.honeycomb
{
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  transform: translateY(80px);
}

.honeycomb-cell
{
  -webkit-box-flex: 0;
  flex: 0 1 250px;
  max-width: 250px;
  height: 137.5px;
  margin: 65.4px 12.5px 25px;
  position: relative;
  padding: 0.5em;
  text-align: center;
  z-index: 1;
  box-shadow: 0px 0px 15px 0 rgba(0,0,0,0.1);
}
.honeycomb-cell_img
{
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%);
}
.honeycomb-cell_title
{
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  font-size: 1.75em;
  transition: opacity 350ms;
}
.honeycomb-cell_title > small
{
  font-weight: 300;
  margin-top: 0.25em;
}
.honeycomb-cell::before,
.honeycomb-cell::after
{
  content: '';
}
.honeycomb-cell::before,
.honeycomb-cell::after,
.honeycomb-cell_img
{
  top: -50%;
  left: 0;
  width: 100%;
  height: 200%;
  display: block;
  position: absolute;
  -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%);
  z-index: -1;
}
.honeycomb-cell::before
{
  background: #fff;
  transform: scale(1.055);
}
.honeycomb-cell::after
{
  background: #111111;
  opacity: 0.7;
  transition: opacity 350ms;
  -webkit-transition: opacity 350ms;
}
.honeycomb-cell:hover
.honeycomb-cell_title
{
  opacity: 0;
}
.honeycomb-cell:hover
.honeycomb-cell_img
{
  filter: grayscale(0%);
}
.honeycomb-cell:hover::before
{
  background: #fc5130;
}
.honeycomb-cell:hover::after
{
  opacity: 0;
}
.honeycomb_Hidden
{
  display: none;
  opacity: 0;
  width: 250px;
  margin: 0 12.5px;
}

/****** Responsive *******/

@media (max-width: 550px) 
{
  .honeycomb-cell 
  {
    margin: 81.25px 25px;
  }
}


@media (min-width: 550px) and (max-width: 825px) 
{
  .honeycomb-cell:nth-child(3n) 
  {
    margin-right: calc(50% - 125px);
    margin-left: calc(50% - 125px);
  }

  .honeycomb_Hidden:nth-child(3n + 5) 
  {
    display: block;
  }
}


@media (min-width: 825px) and (max-width: 1100px) {
 
  .honeycomb-cell:nth-child(5n + 4) 
  {
    margin-left: calc(50% - 275px);
  }

  .honeycomb-cell:nth-child(5n + 5) 
  {
    margin-right: calc(50% - 275px);
  }

  .honeycomb_Hidden:nth-child(5n), 
  .honeycomb_Hidden:nth-child(5n + 3) 
  {
    display: block;
  }
}
@media (min-width: 1100px) 
{
  .honeycomb-cell:nth-child(7n + 5) {
    margin-left: calc(50% - 400px);
  }

  .honeycomb-cell:nth-child(7n + 7), 
  .honeycomb-cell:nth-child(7n + 5):nth-last-child(2) 
  {
    margin-right: calc(50% - 400px);
  }

  .honeycomb_Hidden:nth-child(7n + 7), 
  .honeycomb_Hidden:nth-child(7n + 9), 
  .honeycomb_Hidden:nth-child(7n + 11) 
  {
    display: block;
  }
}

Tags

Responsive Honeycomb Grid HTML CSS

Subscribe

Get Updates

Subscribe our newsletter to get the last update into your inbox!

Please insert email address.

Recommended Posts