Honeycomb

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://csshexagon.com/img/meow.jpg" alt="" />
                </div>
            </div>
        </div>
    </a>
</div>
</div>

CSS

.hexaHolder{
    height: 115px;
    width: 99px;
    float: left;
}
.hexa img{
    width:130%;
    margin-top: -5px;
    margin-left:-50px
}
.hexa, .hexa div {
    margin: 0 auto;
    transform-origin: 50% 50%;
    overflow: hidden;
}
.hexa {
    text-align: center;
    margin: 0;
    width: 270px;
    height: 315px;
}
.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;    
}