2

I'm using James Tauber's hexagon tutorial to create a honeycomb-styled navigation. I have the orientation that I want, but I am having trouble figuring out how to add images to the inside of the hexagons. Is the code in the jsfiddle not optimized for putting images inside of the hexagons or am I not seeing something?

I realize that there are other questions about putting images inside of hexagons, but none of them really helped me.

Advice would be appreciated.

HTML:

.hex {
      float: left;
      margin-right: -26px;
      margin-bottom: -50px;
    }
    .hex .left {
      float: left;
      width: 0;
      border-right: 30px solid #444;
      border-top: 52px solid transparent;
      border-bottom: 52px solid transparent;
    }
    .hex .middle {
      float: left;
      width: 60px;
      height: 104px;
      background: #444;
    }
    .hex .right {
      float: left;
      width: 0;
      border-left: 30px solid #444;
      border-top: 52px solid transparent;
      border-bottom: 52px solid transparent;
    }
    .hex-row {
      clear: left;
    }
    .hex.even {
      margin-top: 53px;
    }
    #wrap {
      min-width: 600px;
    }
<div id="wrap">
  <div class="hex-row">
    <a href="http://www.google.ca">
      <div class="hex">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
      </div>
    </a>

    <div class="hex even">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="hex">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="hex even">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="hex">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </div>
</div>
jbutler483
  • 24,074
  • 9
  • 92
  • 145
mateikav
  • 93
  • 3
  • 9

3 Answers3

4

Alrighty, well I couldn't do it with your way of making hexagons, since it is just a hole bunch-a borders (background-image doesn't work with borders). But I found another way, using @geoffrey_crofte's solution on codepen.

To start, here is the JSFiddle with the working example.

And here is the updated code.

HTML:

<div id="wrap">
<div class="hex-row">
    <a href="http://www.google.ca" class='hexaHolder'>
        <div class="hexa">
            <div class="hex1">
                <div class="hex2">
                    <img src="http://farm3.staticflickr.com/2788/4392569951_8bcec3b3ed_z.jpg?zz=1" alt="" />
                </div>
            </div>
        </div>
    </a>
    <a href="http://www.google.ca" class='hexaHolder even'>
        <div class="hexa">
            <div class="hex1">
                <div class="hex2">
                    <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" />
                </div>
            </div>
        </div>
    </a>
    <a href="http://www.google.ca" class='hexaHolder'>
        <div class="hexa">
            <div class="hex1">
                <div class="hex2">
                    <img src="http://farm3.staticflickr.com/2178/3531465579_8bff044e9b_z.jpg?zz=1" alt="" />
                </div>
            </div>
        </div>
    </a>
    <a href="http://www.google.ca" class='hexaHolder even'>
        <div class="hexa">
            <div class="hex1">
                <div class="hex2">
                    <img     src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" />
                </div>
            </div>
        </div>
    </a>
    <a href="http://www.google.ca" class='hexaHolder'>
        <div class="hexa">
            <div class="hex1">
                <div class="hex2">
                    <img src="http://farm4.staticflickr.com/3637/3658139504_c33433f163_z.jpg?zz=1" alt="" />
                </div>
            </div>
        </div>
    </a>
</div>
</div>

CSS:

.hexaHolder{
    height: 115px;
    width: 99px;
    float: left;
}
.hexa img{
    width:100%;
    margin-top: -5px;
}
.hexa, .hexa div {
    margin: 0 auto;
    transform-origin: 50% 50%;
    overflow: hidden;
}
.hexa {
    text-align: center;
    margin: 0;
    width: 135px;
    height: 115px;
}
.hexa div {
  width: 100%;
  height: 100%;
}
.hexa {
  transform: rotate(120deg);
}
.hex1 {
  transform: rotate(-60deg);
}
.hex2 {
  transform: rotate(-60deg);
}

.hex-row {
    clear: left;
}

.hexaHolder.even {
    margin-top: 57.5px;
}

#wrap {
    min-width:600px;    
}

Alrighty, so basically what I did was use the code from CodePen as a starting block since it already put an image inside of an hexagon. However, I modified the CSS a HTML a tad just so that you could float the hexagons and position them so that they looked like your example. All of the credit needs to go to @geoffrey_crofte for being the genius behind the hexagon. I just positioned and resized.

Cheers!

Cow
  • 764
  • 5
  • 10
  • 25
  • Wonderful example. Thank you! It was fairly easy to modify your example for [multiple rows](http://jsfiddle.net/thematejka/8o50nebf/). The subsequent rows basically get their own classes (hexaholder2 and even2), so that I can include the top property (for hexaholder2) and zero the margin-top (on even2) to shift up the hexagons that would otherwise be spaced down from the rows above them. – mateikav Jan 16 '15 at 15:27
1

With the way this CSS is set up you could do a background image in the center but you'd still have gray triangles on your left and right. The code is a little more complicated for a background-image: but check out my fiddle to see how it works http://jsfiddle.net/z9Lo0gmu/

Here's an even more complex example of a hexagon grid: Responsive grid of hexagons

Community
  • 1
  • 1
Jake Taylor
  • 4,246
  • 3
  • 15
  • 16
1

Tutorial

A quick mockup created:

.hex {
  width: 150px;
  height: 86px;
  background-color: #ccc;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto 173px;
  position: relative;
  float: left;
  margin: 25px 5px;
  text-align: center;
  zoom: 1;
}
.hex.hex-gap {
  margin-left: 86px;
}
.hex a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999em;
  position: absolute;
  top: 0;
  left: 0;
}
.hex .corner-1,
.hex .corner-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -2;
  overflow: hidden;
  backface-visibility: hidden;
}
.hex .corner-1 {
  z-index: -1;
  transform: rotate(60deg);
}
.hex .corner-2 {
  transform: rotate(-60deg);
}
.hex .corner-1:before,
.hex .corner-2:before {
  width: 173px;
  height: 173px;
  content: '';
  position: absolute;
  background: inherit;
  top: 0;
  left: 0;
  z-index: 1;
  background: inherit;
  background-repeat: no-repeat;
  backface-visibility: hidden;
}
.hex .corner-1:before {
  transform: rotate(-60deg) translate(-87px, 0px);
  transform-origin: 0 0;
}
.hex .corner-2:before {
  transform: rotate(60deg) translate(-48px, -11px);
  bottom: 0;
}
/* Custom styles*/

.hex .inner {
  color: #eee;
}
.hex h4 {
  font-family: 'Josefin Sans', sans-serif;
  margin: 0;
}
.hex hr {
  border: 0;
  border-top: 1px solid #eee;
  width: 60%;
  margin: 15px auto;
}
.hex p {
  font-size: 16px;
  font-family: 'Kotta One', serif;
  width: 80%;
  margin: 0 auto;
}
.hex.hex-1 {
  background: #74cddb;
}
.hex.hex-2 {
  background: #f5c53c;
}
.hex.hex-3 {
  background: #80b971;
}
<div class="hex hex-3">
  <div href="#" class="inner">
    <h4>CONTACT US</h4>
    <hr />
    <p>We Open Everyday</p>
  </div>
  
  <div class="corner-1"></div>
  <div class="corner-2"></div>
</div>
<div class="hex" style="background-image: url(http://placekitten.com/g/300/300);">
  <a href="#"></a>
  <div class="corner-1"></div>
  <div class="corner-2"></div>
</div>

Yes, Yes you can do this. There's a little maths involved to create them, but it look's pretty cool once put together!

body {
  background-color: cyan;
}
.hexrow {
  white-space: nowrap;
  /*right/left margin set at (( width of child div x sin(30) ) / 2) makes a fairly tight fit; a 3px bottom seems to match*/
  margin: 0 25px 3px;
}
.hexrow > div {
  width: 100px;
  height: 173.2px;
  /* ( width x cos(30) ) x 2 */
  /* For margin:
    right/left = ( width x sin(30) ) makes no overlap 
    right/left = (( width x sin(30) ) / 2) leaves a narrow separation
    */
  margin: 0 25px;
  position: relative;
  background-image: url(http://i1166.photobucket.com/albums/q605/Artem_Lebedev/dog-training-collars.jpg);
  background-position: -50px 0;
  /* -left position -1 x width x sin(30) */
  background-repeat: no-repeat;
  background-size: auto 120%;
  color: #000000;
  text-align: center;
  line-height: 173.2px;
  /*equals height*/
  display: inline-block;
}
.hexrow > div:nth-child(odd) {
  top: 43.3px;
  /* ( width x cos(30) / 2 ) */
}
.hexrow > div:nth-child(even) {
  top: -44.8px;
  /* -1 x( ( width x cos(30) / 2) + (hexrow bottom margin / 2)) */
}
.hexrow > div > div:first-of-type {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  background-image: inherit;
  -ms-transform: rotate(60deg);
  /* IE 9 */
  -moz-transform: rotate(60deg);
  /* Firefox */
  -webkit-transform: rotate(60deg);
  /* Safari and Chrome */
  -o-transform: rotate(60deg);
  /* Opera */
  transform: rotate(60deg);
}
.hexrow > div > div:first-of-type:before {
  content: '';
  position: absolute;
  width: 200px;
  /* width of main + margin sizing */
  height: 100%;
  background-image: inherit;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto 120%;
  bottom: 0;
  left: 0;
  z-index: 1;
  -ms-transform: rotate(-60deg) translate(-150px, 0);
  /* IE 9 */
  -moz-transform: rotate(-60deg) translate(-150px, 0);
  /* Firefox */
  -webkit-transform: rotate(-60deg) translate(-150px, 0);
  /* Safari and Chrome */
  -o-transform: rotate(-60deg) translate(-150px, 0);
  /* Opera */
  transform: rotate(-60deg) translate(-150px, 0);
  -ms-transform-origin: 0 0;
  /* IE 9 */
  -webkit-transform-origin: 0 0;
  /* Safari and Chrome */
  -moz-transform-origin: 0 0;
  /* Firefox */
  -o-transform-origin: 0 0;
  /* Opera */
  transform-origin: 0 0;
}
.hexrow > div > div:last-of-type {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
  overflow: hidden;
  background-image: inherit;
  -ms-transform: rotate(-60deg);
  /* IE 9 */
  -moz-transform: rotate(-60deg);
  /* Firefox */
  -webkit-transform: rotate(-60deg);
  /* Safari and Chrome */
  -o-transform: rotate(-60deg);
  /* Opera */
  transform: rotate(-60deg);
}
.hexrow > div > div:last-of-type:before {
  content: '';
  position: absolute;
  width: 200px;
  /* starting width + margin sizing */
  height: 100%;
  background-image: inherit;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto 120%;
  bottom: 0;
  left: 0;
  z-index: 1;
  /*translate properties are initial width (100px) and half height (173.2 / 2 = 86.6) */
  -ms-transform: rotate(60deg) translate(100px, 86.6px);
  /* IE 9 */
  -moz-transform: rotate(60deg) translate(100px, 86.6px);
  /* Firefox */
  -webkit-transform: rotate(60deg) translate(100px, 86.6px);
  /* Safari and Chrome */
  -o-transform: rotate(60deg) translate(100px, 86.6px);
  /* Opera */
  transform: rotate(60deg) translate(100px, 86.6px);
  -ms-transform-origin: 100% 0;
  /* IE 9 */
  -webkit-transform-origin: 100% 0;
  /* Safari and Chrome */
  -moz-transform-origin: 100% 0;
  /* Firefox */
  -o-transform-origin: 100% 0;
  /* Opera */
  transform-origin: 100% 0;
}
.hexrow > div > span {
  display: inline-block;
  margin: 0 -30px;
  line-height: 1.1;
  vertical-align: middle;
  white-space: normal;
}
.hexrow:nth-child(2) > div:nth-child(1) {
  background-image: url(http://i724.photobucket.com/albums/ww244/NBAchikk1995/flowers.jpg);
}
.hexrow:nth-child(2) > div:nth-child(1) > span {
  /*change some other settings*/
  margin: 0 -20px;
  color: black;
  font-size: .8em;
  font-weight: bold;
}
.hexrow:nth-child(2) > div:nth-child(2) {
  background-image: url(http://i197.photobucket.com/albums/aa231/sterling_red/landscape.jpg);
  color: #ffffff;
}
.hexrow:nth-child(2) > div:nth-child(3) {
  background-image: url(http://i257.photobucket.com/albums/hh204/h22prld98/2157781306_7a7a8e4cf7.jpg);
  opacity: .3;
  color: #ffffff;
}
.hexrow:nth-child(2) > div:nth-child(3) > div:before {
  /* nothing special needed here */
}
.hexrow:nth-child(2) > div:nth-child(4) {
  background-image: url(http://i916.photobucket.com/albums/ad8/paulak100/Obraz395.jpg);
  /*you can shift a large background image, but it can get complicated
    best to keep the image as the total width (200px) and height (174px)
    that the hex would be.
    */
  background-position: -150px -20px;
}
.hexrow:nth-child(2) > div:nth-child(4) > div:before {
  background-position: -100px -20px;
  /* the left shift is always less in the pseudo elements by the amount of the base shift */
}
<div class="hexrow">
  <div>
    <span>Any text you would like (that fits).</span>
    <div></div>
    <div></div>
  </div>
  <div>
    <span>Really, change the text to say what you want!</span>
    <div></div>
    <div></div>
  </div>
  <div>
    <span>I'm not kidding here.</span>
    <div></div>
    <div></div>
  </div>
  <div>
    <span>Okay?</span>
    <div></div>
    <div></div>
  </div>
</div>

<div class="hexrow">
  <div>
    <span>Did I mention you can change images? I mean, really, these are just rectangular images "cropped" to a hex shape (well, more complicated than just a crop, but the result is the same).</span>
    <div></div>
    <div></div>
  </div>
  <div>
    <span>See, another image!</span>
    <div></div>
    <div></div>
  </div>
  <div>
    <span>Testing opacity.</span>
    <div></div>
    <div></div>
  </div>
  <div>
    <span>Satisfied?</span>
    <div></div>
    <div></div>
  </div>
</div>

~SOURCE

Here is also a great example of this design!

Community
  • 1
  • 1
jbutler483
  • 24,074
  • 9
  • 92
  • 145
  • I've certainly seen [that example](http://jsfiddle.net/mqyCb/154/) by [ScottS](http://stackoverflow.com/questions/10062887/generate-repeating-hexagonal-pattern-with-css3). I would have used it, but I struggled to turn the hexagons into links. It is not as simple as wrapping the divs in – mateikav Jan 16 '15 at 15:41
  • @mateikav: In my haste I forgot to add source! – jbutler483 Jan 16 '15 at 15:51
  • @mateikav: Did you see [this](http://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3) as all? Could be a *very* interesting read! impelemnted a basic sample – jbutler483 Jan 16 '15 at 16:01