Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Responsive grid of hexagons

I loaded in multiple images on my website from the internet. Is it possible to give all those images an hexagon shape in a responsive grid?

<div>     <img src="link" class="Image"> </div>  <div>     <img src="link" class="Image"> </div> ... 

I found multiple ways to do this but you needed to fill in the image src in the CSS code. This isnt possible for me cause the website loads in random images from the internet with jQuery so I can't use background images.

I tried this: http://jsfiddle.net/8f5m5wv0/

like image 343
Stefan Avatar asked Sep 30 '14 07:09

Stefan


People also ask

How do I make my grid area responsive?

Building a Responsive Grid-View First ensure that all HTML elements have the box-sizing property set to border-box . This makes sure that the padding and border are included in the total width and height of the elements. Read more about the box-sizing property in our CSS Box Sizing chapter.

How do you construct a hexagonal grid?

Draw a square on your grid paper. Use more boxes of the grid paper to draw a large hexagon; less boxes to draw a small hexagon. For this example, draw a square that is five boxes long by five boxes deep. Press down lightly on the pencil when drawing the square.

How do you make a hexagon border in HTML?

Here is another method to create hexagons with border (or outline) using the clip-path feature. In this method, we use a container element and a pseudo-element which has smaller dimensions (both height and width ) than the container.


1 Answers

Here is the demo and the repositery for the responsive grid of hexagons. The code here isn't maintained. It was moved to github and improved so comments, issue reporting and contributions should be made there.

Responsive grid of hexagons

This technique uses :

  • the <img> tag
  • an unordered list : each hexagon is contained in a <li> tag and an <a> tag
  • transform rotate and skew to make the hexagon shapes
  • overflow:hidden;
  • nth-child() to space the hexagons in a regular pattern

And more to create the hexagon grid with the <img> tag.

Hexagon grid features :

  • The grid is responsive as it relies on percent widths. The hexagons maintain their aspect ratio with the padding-bottom technique and the images resize to fit the hexagon shape.
  • A hover effect over the hexagons : a text slides in with a transparent overlay over the image.
  • Each hexagon maintains its boundaries : the hover effect (or click event) for each hexagon only triggered inside the actual shape.

Full code

The following snippet isn't the latest version of the grid. The GitHub repo is maintained and up to date. Issues and contributions can be made there.

* {      margin: 0;      padding: 0;  }    body {      font-family: 'Open Sans', arial, sans-serif;      background: rgb(123, 158, 158);  }    #hexGrid {      overflow: hidden;      width: 90%;      margin: 0 auto;      padding:0.707% 0;  }    #hexGrid:after {      content: "";      display: block;      clear: both;  }    .hex {      position: relative;      list-style-type: none;      float: left;      overflow: hidden;      visibility: hidden;      -webkit-transform: rotate(-60deg) skewY(30deg);          -ms-transform: rotate(-60deg) skewY(30deg);              transform: rotate(-60deg) skewY(30deg);  }    .hex * {      position: absolute;      visibility: visible;  }    .hexIn {      display:block;      width: 100%;      height: 100%;      text-align: center;      color: #fff;      overflow: hidden;      -webkit-transform: skewY(-30deg) rotate(60deg);          -ms-transform: skewY(-30deg) rotate(60deg);              transform: skewY(-30deg) rotate(60deg);      -webkit-backface-visibility: hidden;              backface-visibility: hidden;  }      /* HEX CONTENT */    .hex img {      left: -100%;      right: -100%;      width: auto;      height: 100%;      margin: 0 auto;  }    .hex h1, .hex p {      width: 90%;      padding: 0 5%;      background-color: #008080;      background-color: rgba(0, 128, 128, 0.8);      font-family: 'Raleway', sans-serif;      -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;              transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;  }    .hex h1 {      bottom: 110%;      font-style: italic;      font-weight: normal;      font-size: 1.5em;      padding-top: 100%;      padding-bottom: 100%;  }    .hex h1:after {      content: '';      display: block;      position: absolute;      bottom: -1px;      left: 45%;      width: 10%;      text-align: center;      z-index: 1;      border-bottom: 2px solid #fff;  }    .hex p {      padding-top: 50%;      top: 110%;      padding-bottom: 50%;  }      /* HOVER EFFECT  */    .hexIn:hover h1 {      bottom: 50%;      padding-bottom: 10%;  }    .hexIn:hover p {      top: 50%;      padding-top: 10%;  }    /* SPACING AND SIZING */    @media (min-width:1201px) {      .hex {          width: 19.2%; /* = (100-4) / 5 */          padding-bottom: 22.170%; /* =  width / sin(60deg) */      }      .hex:nth-child(9n+6),      .hex:nth-child(9n+7),      .hex:nth-child(9n+8),      .hex:nth-child(9n+9) {          margin-top: -4.676%;          margin-bottom: -4.676%;          -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);              -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);                  transform: translateX(50%) rotate(-60deg) skewY(30deg);      }      .hex:nth-child(9n+6):last-child,      .hex:nth-child(9n+7):last-child,      .hex:nth-child(9n+8):last-child,      .hex:nth-child(9n+9):last-child {          margin-bottom: 0;      }      .hex:nth-child(9n+6) {          margin-left: 0.5%;          clear: left;      }      .hex:nth-child(9n+10) {          clear: left;      }      .hex:nth-child(9n+2),      .hex:nth-child(9n+ 7) {          margin-left: 1%;          margin-right: 1%;      }      .hex:nth-child(9n+3),      .hex:nth-child(9n+4),      .hex:nth-child(9n+8) {          margin-right: 1%;      }  }    @media (max-width: 1200px) and (min-width:901px) {      .hex {          width: 24.25%; /* = (100-3) / 4 */          padding-bottom: 28.001%; /* =  width / sin(60deg) */      }      .hex:nth-child(7n+5),      .hex:nth-child(7n+6),      .hex:nth-child(7n+7) {          margin-top: -6.134%;          margin-bottom: -6.134%;          -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);              -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);                  transform: translateX(50%) rotate(-60deg) skewY(30deg);      }      .hex:nth-child(7n+5):last-child,      .hex:nth-child(7n+6):last-child,      .hex:nth-child(7n+7):last-child {          margin-bottom: 0;      }      .hex:nth-child(7n+2),      .hex:nth-child(7n+6) {          margin-left: 1%;          margin-right: 1%;      }      .hex:nth-child(7n+3) {          margin-right: 1%;      }      .hex:nth-child(7n+8) {          clear: left;      }      .hex:nth-child(7n+5) {          clear: left;          margin-left: 0.5%;      }  }    @media (max-width: 900px) and (min-width:601px) {      .hex {          width: 32.666%; /* = (100-2) / 3 */          padding-bottom: 37.720%; /* =  width / sin(60) */      }      .hex:nth-child(5n+4),      .hex:nth-child(5n+5) {          margin-top: -8.564%;          margin-bottom: -8.564%;          -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);              -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);                  transform: translateX(50%) rotate(-60deg) skewY(30deg);      }      .hex:nth-child(5n+4):last-child,      .hex:nth-child(5n+5):last-child {          margin-bottom: 0;      }      .hex:nth-child(5n+4) {          margin-right: 1%;          margin-left: 0.5%;      }      .hex:nth-child(5n+2) {          margin-left: 1%;          margin-right: 1%;      }      .hex:nth-child(5n+6) {          clear: left;      }  }    @media (max-width: 600px) {      .hex {          width: 49.5%; /* = (100-1) / 2 */          padding-bottom: 57.158%; /* =  width / sin(60) */      }      .hex:nth-child(3n+3) {          margin-top: -13.423%;          margin-bottom: -13.423%;          -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);              -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);                  transform: translateX(50%) rotate(-60deg) skewY(30deg);      }      .hex:nth-child(3n+3):last-child {          margin-bottom: 0;      }      .hex:nth-child(3n+3) {          margin-left: 0.5%;      }      .hex:nth-child(3n+2) {          margin-left: 1%;      }      .hex:nth-child(3n+4) {          clear: left;      }  }
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'>  <link href='http://fonts.googleapis.com/css?family=Raleway:400,700,300,200,100,900' rel='stylesheet' type='text/css'>    <ul id="hexGrid">    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>    <li class="hex">      <a class="hexIn" href="#">        <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />        <h1>This is a title</h1>        <p>Some sample text about the article this hexagon leads to</p>      </a>    </li>  </ul>

Changing the number of hexagons per row

The grid adapts the number of hexagons per row according to the viewport width from 5 on screens wider than 1200px to 2 on screens narrower than 600px.

If you don't need the media queries but just want to change the number of hexagons per row, you can keep the CSS from the corresponding media query and remove the unneeded ones.

For more customization, see sizing and spacing of hexagons.


Demos

For a list of all the demos, see this codepen collection: Responsive grids of hexagons with different numbers of hexagons per row, centering options and more...

Here is the original codepen demo with the .pusher element to make an irregular grid of hexagons. The .pusher element is used to make the "holes" in the grid with empty hexagons.

like image 79
web-tiki Avatar answered Oct 17 '22 13:10

web-tiki