41

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/

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Stefan
  • 1,905
  • 7
  • 24
  • 38

10 Answers10

96

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.

Community
  • 1
  • 1
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • 1
    This is fantastic, great work web-tiki! I'm surprised there are not more comments saying that. One minor issue im faced with is centering the hex image. Due to the way the pushers work, the whole section is moved slightly left off center. The way I have gone around this is add a wrapper div and pad out the right hand side: `.hex-wrapper { max-width: 600px; padding-right: 80px; margin-left: auto; margin-right: auto; }` I also needed it a bit smaller, but not on mobile, hence max width 600. Thoughts anyone? – redfox05 Apr 20 '15 at 11:54
  • 4
    This is pretty awesome...you are a really talented designer – Mad Scientist Jun 08 '15 at 21:24
  • @web-tiki can you explain how do you choose the value of margin-top and margin-bottom of hexagons of even lines? – Red Nov 05 '15 at 15:11
  • @red its the length of x [in this image](http://imgur.com/EZGQrGv) minus the vertical margin you acualy see between hexagons. – web-tiki Nov 05 '15 at 15:20
  • @web-tiki thanks, I got it, x is the padding bottom value divided by 4 but how I get the margin between hexagons in percentage? – Red Nov 05 '15 at 15:25
  • 1
    @red I won't have time to explain right now but I'll try to write something up soon. I'll ping you when its done. – web-tiki Nov 05 '15 at 17:14
  • @Red I made a repo with an explanation about the vertical and horizontal spacing of the hexagons see here : [responsive hexagon grid](https://github.com/web-tiki/responsive-grid-of-hexagons) – web-tiki Dec 19 '15 at 17:29
  • Hey @web-tiki thank you so much, this really helped me a lot. I was wondering how do I reduce the gap between the hexagons. I tried setting margin and left, right to 0 on `.hexIn` but it doesn't seem to work. Please any help would be greatly appreciated. – Zed Mar 05 '22 at 20:12
  • @Zed the space between the hexagons is made with margin on the `.hex` elements. – web-tiki Mar 07 '22 at 09:35
9

Alright, here's a clean, cross-browser compatible solution that will even allow you to honeycomb the hexagons:

For this to work, you need to wrap each image in 2 containers, since one will be used for the top left / bottom right cut-off and the other for the top right / bottom left cut-off.

<div class="outerclip">
    <div class="innerclip">
        <img src="http://img1.wikia.nocookie.net/__cb20090714124528/firefly/images/thumb/1/11/Firefly_class_ship.jpg/100px-136,568,0,431-Firefly_class_ship.jpg" />
    </div>
</div>

The CSS then gives each cut-off container a skew that adds the angles to the image:

.outerclip {
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    -transform: skew(-30deg);
    overflow: hidden;
    display: inline-block;
}
.innerclip {
    -webkit-transform: skew(50deg);
    -ms-transform: skew(50deg);
    transform: skew(50deg);
    overflow: hidden;
    display: inline-block;
}
img {
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    transform: skew(-30deg);
}

Demo: http://jsfiddle.net/XkQtF/3/

Note: to improve the render quality, I'd advise to give both .outerclip and .innerclip the same fixed height.

To get the honeycombs, you can put several images in a row container and then offset each odd row by a couple of pixels like this:

Honeycombs

Demo: http://jsfiddle.net/XkQtF/4/

S.B.
  • 2,920
  • 1
  • 17
  • 25
8

if it is about honeycombing, bee nest css here is a CSS possibilitie. http://codepen.io/gc-nomade/pen/eyntg/

  <div><!-- even div gets a negative bottom margin. all of them gets a negative right margin -->
  <span><!-- skewed and rotated -->
    <img src="http://lorempixel.com/200/200/food/1"/><!-- rotated back, unskewed and rescaled -->
  </span>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
6

you can use vertical-padding in % + pseudo element to draw a square to begin with.

Then , use a second element to draw a mask.

DEMO CSS pseudo hexagon

HTML

        <div class="hex">
          <img src="image100x120">
        </div>

CSS

<!--language:css-->

.hex  {
  position:relative;
  margin:auto;
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  display:table;
}
.hex:before {
  content:'';
  padding-top:120%;
  display:inline-block;
  vertical-align:middle;
}

.hex:after {
  content:'';
  position:absolute;
  top:0%;
  left:-10%;
  width:120%;
  padding-top:120%;
  transform: rotatex(45deg) rotate(45deg);
  text-align:center;
  box-shadow:0 0 0 200px white;;
}
.hex img {
  display:inline-block;
  vertical-align:middle;
  margin:0 -10px;
}
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Good work, but that isn't an hexagon, it's an octagon :) – Oriol Apr 11 '14 at 18:46
  • Your solution, while a nice concept, unfortunately doesn't support honeycombing multiple images. – S.B. Apr 12 '14 at 00:12
  • @S.B. okay , so you must be looking for something like this. http://codepen.io/gc-nomade/pen/eyntg/ inspired from http://codepen.io/gc-nomade/pen/KzimD so it does support honey things :) – G-Cyrillus Apr 12 '14 at 01:00
4

Demo

HTML:

<div class="hexagon">
  <div class="contents"></div>
</div>

SASS (with Compass):

$width: 400px;
$fillColor: #CCC;
$height: $width*sin(60deg);
.hexagon {
  display: inline-block;
  position: relative;
  width: $width;
}
.hexagon:before, .hexagon:after {
  content: '';
  display: block;
  width: 50%;
  border: 0 solid transparent;
}
.hexagon:before {
  border-bottom-color: $fillColor;
  border-width: 0 $width/4 $height/2;
}
.hexagon:after {
  border-top-color: $fillColor;
  border-width: $height/2 $width/4 0;
}
.hexagon > .contents {
  position: absolute;
  top: 0; bottom: 0;
  left: 25%; right: 25%; 
}

Then, if you want to place an image in the hexagon, inside .contents use

<img id="myimg" src="foo" />

and, for example, style it like this:

#myimg {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0; 
  margin: auto;
  width: 50%;
}
Oriol
  • 274,082
  • 63
  • 437
  • 513
3

You can create an image with transparent hexagon shape and superimpose it over injected image.

HTML:

<div class="hexagon">
    <!-- get the image -->
    <img src="injected.jpg" />

    <!-- apply hexagon shape to it -->
    <img src="transparentHex.png" />    
</div>

CSS:

.hexagon {
    position: relative;
}

.hexagon > img {
    position: absolute;
}

Demo: http://jsfiddle.net/dr6Hp/3/

Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136
  • Doesn't solve the honeycombing problem when multiple images are involved. – rdnydnns Apr 11 '14 at 18:30
  • 1
    Ups, sorry missed the honeycomb part. In that case perhaps better not inventing the wheel and try one of jQuery plugins, e.g. http://www.jqueryscript.net/layout/jQuery-Plugin-For-Responsive-Hexagon-Grid-Layout-Honeycombs.html? – Yuriy Galanter Apr 11 '14 at 18:38
3

Check out this responsive hexagonal grid that is implemented with AngularJS.

enter image description here

HTML

<div class="wrapper">

  <section class="hex-grid">

    <div
      ng-repeat="item in app.items"
      class="grid-item repeat-animation">

      <div class="inner">
        <div
          class="inner-inner"
          ng-style="{ 'background-image': 'url({{ item.imgSrc }})' }">

          <a
            href=""
            class="grid-info">

            <div class ="inner-text">
              <div class="inner-text-inner">

                <h2>{{ item.name }}</h2>
                <p>{{item.desc }}</p>

              </div><!-- /.inner-text-inner -->
            </div><!-- /.inner-text -->
          </a><!-- /.grid-info -->
        </div><!-- /.inner-inner -->
      </div><!-- /.inner -->
    </div><!-- /.grid-item -->
  </section><!-- /.hex-grid -->

</div><!-- /.wrapper -->

CSS: The hexagonal grid

.hex-grid {
  position: relative;
  width: 80%;
  left: 10%;
  padding-top: 120px;
}
@media (max-width: 767px) {
  .hex-grid {
    width: 100%;
    left: 0;
  }
}
.hex-grid .grid-item {
  position: relative;
  display: inline-block;
  float: left;
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
  cursor: pointer;
}
@media (max-width: 633px) {
  .hex-grid .grid-item {
    width: 222%;
    margin: 0 -61%;
    margin-bottom: 10px;
  }
}
@media (min-width: 634px) and (max-width: 1022px) {
  .hex-grid .grid-item {
    width: 133%;
    margin: 0 -42%;
    margin-bottom: -25%;
  }
  .hex-grid .grid-item:nth-child(2),
  .hex-grid .grid-item:nth-child(4),
  .hex-grid .grid-item:nth-child(6),
  .hex-grid .grid-item:nth-child(8),
  .hex-grid .grid-item:nth-child(10),
  .hex-grid .grid-item:nth-child(12),
  .hex-grid .grid-item:nth-child(14),
  .hex-grid .grid-item:nth-child(16),
  .hex-grid .grid-item:nth-child(18),
  .hex-grid .grid-item:nth-child(20),
  .hex-grid .grid-item:nth-child(22),
  .hex-grid .grid-item:nth-child(24),
  .hex-grid .grid-item:nth-child(26),
  .hex-grid .grid-item:nth-child(28),
  .hex-grid .grid-item:nth-child(30) {
    margin-top: 28%;
  }
  .hex-grid .grid-item:nth-child(3),
  .hex-grid .grid-item:nth-child(5),
  .hex-grid .grid-item:nth-child(7),
  .hex-grid .grid-item:nth-child(9),
  .hex-grid .grid-item:nth-child(11),
  .hex-grid .grid-item:nth-child(13),
  .hex-grid .grid-item:nth-child(15),
  .hex-grid .grid-item:nth-child(17),
  .hex-grid .grid-item:nth-child(19),
  .hex-grid .grid-item:nth-child(21),
  .hex-grid .grid-item:nth-child(23),
  .hex-grid .grid-item:nth-child(25),
  .hex-grid .grid-item:nth-child(27),
  .hex-grid .grid-item:nth-child(29) {
    clear: left;
  }
}
@media (min-width: 1023px) and (max-width: 1599px) {
  .hex-grid .grid-item {
    width: 91.6%;
    margin: 0 -29.2%;
    margin-bottom: -17.5%;
  }
  .hex-grid .grid-item:nth-child(2),
  .hex-grid .grid-item:nth-child(5),
  .hex-grid .grid-item:nth-child(8),
  .hex-grid .grid-item:nth-child(11),
  .hex-grid .grid-item:nth-child(14),
  .hex-grid .grid-item:nth-child(17),
  .hex-grid .grid-item:nth-child(20),
  .hex-grid .grid-item:nth-child(23),
  .hex-grid .grid-item:nth-child(26),
  .hex-grid .grid-item:nth-child(29) {
    margin-top: 19%;
  }
  .hex-grid .grid-item:nth-child(4),
  .hex-grid .grid-item:nth-child(7),
  .hex-grid .grid-item:nth-child(10),
  .hex-grid .grid-item:nth-child(13),
  .hex-grid .grid-item:nth-child(16),
  .hex-grid .grid-item:nth-child(19),
  .hex-grid .grid-item:nth-child(22),
  .hex-grid .grid-item:nth-child(25),
  .hex-grid .grid-item:nth-child(28) {
    clear: left;
  }
}
@media (min-width: 1600px) {
  .hex-grid .grid-item {
    width: 66.7%;
    margin: 0 -20.9%;
    margin-bottom: -12.5%;
  }
  .hex-grid .grid-item:nth-child(2),
  .hex-grid .grid-item:nth-child(4),
  .hex-grid .grid-item:nth-child(6),
  .hex-grid .grid-item:nth-child(8),
  .hex-grid .grid-item:nth-child(10),
  .hex-grid .grid-item:nth-child(12),
  .hex-grid .grid-item:nth-child(14),
  .hex-grid .grid-item:nth-child(16),
  .hex-grid .grid-item:nth-child(18),
  .hex-grid .grid-item:nth-child(20),
  .hex-grid .grid-item:nth-child(22),
  .hex-grid .grid-item:nth-child(24),
  .hex-grid .grid-item:nth-child(26),
  .hex-grid .grid-item:nth-child(28),
  .hex-grid .grid-item:nth-child(30) {
    margin-top: 14%;
  }
  .hex-grid .grid-item:nth-child(5),
  .hex-grid .grid-item:nth-child(9),
  .hex-grid .grid-item:nth-child(13),
  .hex-grid .grid-item:nth-child(17),
  .hex-grid .grid-item:nth-child(21),
  .hex-grid .grid-item:nth-child(25),
  .hex-grid .grid-item:nth-child(29) {
    clear: left;
  }
}
.hex-grid .grid-item .inner {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.hex-grid .grid-item .inner .inner-inner {
  -webkit-transform-style: preserve-3d;
  /* Chrome, Safari, Opera */
  transform-style: preserve-3d;
  visibility: visible;
  overflow: hidden;
  width: 100%;
  padding-bottom: 40%;
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  transform: rotate(-60deg);
  background-repeat: no-repeat;
  background-size: 50%;
  -webkit-transition: all 0.35s ease-out;
  transition: all 0.35s ease-out;
  background-position: 50%;
}
@media (min-width: 1100px) {
  .hex-grid .grid-item .inner .inner-inner {
    padding-bottom: 40%;
  }
}
.hex-grid .grid-item .inner .inner-inner:hover {
  background-size: 60%;
}
.hex-grid .grid-item .inner .inner-inner .grid-info {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 10%;
  background: #ffffff;
  color: #000000;
  text-decoration: none;
  text-align: center;
  z-index: 2;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}
.hex-grid .grid-item .inner .inner-inner .grid-info:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
.hex-grid .grid-item .inner .inner-inner .grid-info .inner-text {
  display: table;
  position: relative;
  height: 100%;
  width: 46%;
  left: 27%;
}
.hex-grid .grid-item .inner .inner-inner .grid-info .inner-text .inner-text-inner {
  display: table-cell;
  vertical-align: middle;
}
.hex-grid .grid-item .inner .inner-inner {
  -webkit-backface-visibility: hidden;
}

CSS: The animation

.repeat-animation.ng-enter-stagger,
.repeat-animation.ng-leave-stagger,
.repeat-animation.ng-move-stagger {
  /* 100ms will be applied between each sucessive enter operation */
     -moz-transition-delay: 0.1s !important;
  -webkit-transition-delay: 0.1s !important;
          transition-delay: 0.1s !important;

  /* this is here to avoid accidental CSS inheritance */
  -webkit-transition-duration: 0 !important;
          transition-duration: 0 !important;
}

.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
     -moz-transition: 0.2s ease-in-out all;
  -webkit-transition: 0.2s ease-in-out all;
          transition: 0.2s ease-in-out all;
}

.repeat-animation.ng-leave.ng-leave-active,
.repeat-animation.ng-enter,
.repeat-animation.ng-move {
     -moz-transition: 0.2s ease-in-out all;
  -webkit-transition: 0.2s ease-in-out all;
          transition: 0.2s ease-in-out all;

  opacity:0;
}

.repeat-animation.ng-leave,
.repeat-animation.ng-move.ng-move-active,
.repeat-animation.ng-enter.ng-enter-active {
  opacity:1;
}

AngularJS

'use strict';
(function() {
  /**
   * Declares the app module.
   */
  angular
    .module( 'app', [ 'ngAnimate' ] );

//...

Original: http://rachidmrad.com/

All the credit goes to Mr. Rachid Mrad, he is an awesome web designer.

https://github.com/mnishiguchi/hexagonal_grid

mnishiguchi
  • 2,051
  • 23
  • 17
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/10994350) – Cindy Meister Jan 22 '16 at 18:21
  • Thanks for your feedback! I posted the essential part of the code. – mnishiguchi Jan 22 '16 at 18:55
2

TRY THIS FIDDLE

http://jsfiddle.net/ku860uoh/

<div class="hex one">
       <div class="images1">
          <div class="images2"></div>
       </div>
    </div>

    <div class="hex two">
       <div class="images1">
          <div class="images2"></div>
       </div>
    </div>

CSS

BODY {
    background: url(http://placekitten.com/600/600);
}
.hex {
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg);
    cursor: pointer;
    }
.images1{
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.images2{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(http://placekitten.com/238/240);
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.images2:hover {
    background-image: url(http://placekitten.com/440/242);
    }

.one {
    width: 400px;
    height: 200px;
    margin: 0 0 0 -80px;
    }
.two {
    width: 200px;
    height: 400px;
    margin: -80px 0 0 20px;
    }
Manjunath Siddappa
  • 2,126
  • 2
  • 21
  • 40
1

instead of using class in img tag use css in container img like

.container img{ your code}

it will save you a lot trouble of putting class in images

himanshu
  • 1,732
  • 1
  • 11
  • 12
  • Eh...an issue for this approach would be if you, at any point, wanted an image in that container that _didn't_ have the styling applied to it. – Chris Forrence Oct 14 '14 at 19:00
  • well if you want a other shape also just change this code and create a class hexagon for image .container img.hexagon { your code} – himanshu Oct 15 '14 at 05:40
1

A pure CSS responsive hexagon grid. It relies on clip-path to create the main shape and shape-outside to make sure we have the correct indentation:

.main {
  display:flex;
  --s: 100px;  /* size  */
  --m: 4px;    /* space */
}

.container {
  font-size: 0; /*disable white space between inline block element */
}

.container div {
  width: var(--s);
  margin: var(--m);
  height: calc(var(--s)*1.1547); /*  = 1/cos(30)  */
  display: inline-block;
  font-size:initial;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  background: red;
  margin-bottom: calc(var(--m) + var(--s)*-0.2885); /* = tan(30)/2 */
}
.container div:nth-child(odd) {
  background:green;
}
.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 100%;
  --r:calc(var(--s)*3*1.1547/2 + 4*var(--m)  - 2px);
  shape-outside: 
   repeating-linear-gradient(     
     transparent 0 calc(var(--r) - 3px),      
     #fff        0 var(--r));
}
<div class="main">
  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Related to get more details: responsive hexagon grid without media query

Temani Afif
  • 245,468
  • 26
  • 309
  • 415