DeshAmarBD
Home » Web Design » Responsive Honeycomb Grid Layout

Responsive Honeycomb Grid Layout

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.

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;
  }
}

RH Suman

Add comment

Leave a Reply

AdBlocker Message

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.