Images inside of css-based hexagons

Question

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>

Answer 1

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!