A Pen by Josh Howenstine.

Hexagon-Image-Tiles-with-Hover-Desc.markdown

Hexagon Image Tiles with Hover Desc

Based on code from pen from dmac37 http://codepen.io/dmac37/details/cfArp

Intended use to display recent posts thumbnails in a wordpress theme.

A Pen by Josh Howenstine on CodePen.

License.

index.html

<h1>HONEYCOMB</h1>
<section>
<div class="hex_row_odd"> 
  <div class="center">
    <div class="hexagon">
      <div class="hex1">
        <div class="hex2" style="background: url('http://cdn.surfbang.com/wp-content/uploads/2012/05/49e0a26c9b1111e181bd12313817987b_7-610x610.jpg') center no-repeat">
          <div class="desc">
            <h2>Welcome this is an epic title</h2>
            <p>website</p>
          </div>  
        </div><!--/hex2--> 
      </div><!--/hex1-->
    </div><!--/hexagon--> 
  </div><!--/center-->
  
  <div class="center">
    <div class="hexagon">
      <div class="hex1">
        <div class="hex2" style="background: url('http://25.media.tumblr.com/tumblr_mb3lh6abw91rg4gq5o1_500.jpg') center no-repeat">
          <div class="desc">
            <h2>Welcome this is an epic title</h2>
            <p>website</p>
          </div>  
        </div><!--/hex2--> 
      </div><!--/hex1-->
    </div><!--/hexagon--> 
  </div><!--/center--> 
  
  <div class="center">
    <div class="hexagon">
      <div class="hex1">
        <div class="hex2" style="background: url('http://distilleryimage6.s3.amazonaws.com/edb09e76db3311e19c2922000a1e87be_6.jpg') center no-repeat">
          <div class="desc">
            <h2>Welcome this is an epic title</h2>
            <p>website</p>
          </div>  
        </div><!--/hex2--> 
      </div><!--/hex1-->
    </div><!--/hexagon--> 
  </div><!--/center--> 
</div><!--/hex_row_even-->

<div class="hex_row_even"> 
  <div class="center">
    <div class="hexagon">
      <div class="hex1">
        <div class="hex2" style="background: url('http://static.tumblr.com/6pl87f7/eVqmduuh2/22948aee82dd11e18cf91231380fd29b_7.jpg') center no-repeat">
          <div class="desc">
            <h2>Welcome this is an epic title</h2>
            <p>website</p>
          </div>  
        </div><!--/hex2--> 
      </div><!--/hex1-->
    </div><!--/hexagon--> 
  </div><!--/center-->
  
  <div class="center">
    <div class="hexagon">
      <div class="hex1">
        <div class="hex2" style="background: url('https://sphotos-b.xx.fbcdn.net/hphotos-ash3/p480x480/1009884_603577726343273_477467476_n.png') center no-repeat">
          <div class="desc">
            <h2>Welcome this is an epic title</h2>
            <p>website</p>
          </div>  
        </div><!--/hex2--> 
      </div><!--/hex1-->
    </div><!--/hexagon--> 
  </div><!--/center--> 
  
  <div class="center">
    <div class="hexagon">
      <div class="hex1">
        <div class="hex2" style="background: url('https://sphotos-b.xx.fbcdn.net/hphotos-prn1/p480x480/62602_426043260757715_221229071_n.jpg') center no-repeat">
          <div class="desc">
            <h2>Welcome this is an epic title</h2>
            <p>website</p>
          </div>  
        </div><!--/hex2--> 
      </div><!--/hex1-->
    </div><!--/hexagon--> 
  </div><!--/center--> 
  
<div class="center">
    <div class="hexagon">
      <div class="hex1">
        <div class="hex2" style="background: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash3/p480x480/942846_10151541455174900_1939011628_n.png') center no-repeat">
          <div class="desc">
            <h2>Welcome this is an epic title</h2>
            <p>website</p>
          </div>  
        </div><!--/hex2--> 
      </div><!--/hex1-->
    </div><!--/hexagon--> 
  </div><!--/center--> 
  
</div><!--/hex_row_even--> 
  
<div class="hex_row_odd"> 
  <div class="center">
    <div class="hexagon">
      <div class="hex1">
        <div class="hex2" style="background: url('http://cdn1.theinertia.com/wp-content/uploads/2012/07/11.jpg') center no-repeat">
          <div class="desc">
            <h2>Welcome this is an epic title</h2>
            <p>website</p>
          </div>  
        </div><!--/hex2--> 
      </div><!--/hex1-->
    </div><!--/hexagon--> 
  </div><!--/center-->
  
  <div class="center">
    <div class="hexagon">
      <div class="hex1">
        <div class="hex2" style="background: url('https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/p480x480/969303_518635678191234_506340474_n.jpg') center no-repeat">
          <div class="desc">
            <h2>Welcome this is an epic title</h2>
            <p>website</p>
          </div>  
        </div><!--/hex2--> 
      </div><!--/hex1-->
    </div><!--/hexagon--> 
  </div><!--/center--> 
  
  <div class="center">
    <div class="hexagon">
      <div class="hex1">
        <div class="hex2" style="background: url('http://distilleryimage0.instagram.com/0353fef4132911e1abb01231381b65e3_6.jpg') center no-repeat">
          <div class="desc">
            <h2>Welcome this is an epic title</h2>
            <p>website</p>
          </div>  
        </div><!--/hex2--> 
      </div><!--/hex1-->
    </div><!--/hexagon--> 
  </div><!--/center--> 
</div><!--/hex_row_even-->  

  
</section>  

script.js

$(document).ready(function() {
  var color = 'one';
  var counter = 0;
  $('.desc').hide();
  $('.hexagon').hover(
    function() {
      $(this).find('.desc').fadeIn('fast');
      counter++;
      if (counter === 0) {
        color = 'base';
      } else if (counter === 1) {
        color = 'one';
      } else if (counter === 2) {
        color = 'two';
      } else if (counter === 3) {
        color = 'three';
      } else if (counter >= 4){
        counter = 0 ;
        color = 'base';
      }
      $(this).find('.desc').addClass(color);
    }, 
    function() {
      $(this).find('.desc').fadeOut('fast', function() {
        $(this).removeClass(color);
      });
    });
});

style.scss

@import "compass/css3";
/* Thanks to dmac37 for this hex technique */

@import url(http://fonts.googleapis.com/css?family=Lato:300);

/* Variables */
$width: 220px;
$pink: rgba(230,0,98,.75);
$green: rgba(169,160,50,.75);
$yellow: rgba(252,171,55,.75);
$brown: rgba(83,70,54,.75);

h1 {
  font-family: 'Lato', sans-serif;
  font-size: 4em;
  font-weight: 300;
  text-align: center;
  margin: 10px;
}

body {
  background: #fff;
}

section {
  margin: 0 auto;
  text-align: center;
  width: 960px;
}

.hex_row_even {
  display: inline-block;
  margin: 0 auto -275px auto;
  overflow: hidden;
}

.hex_row_odd {
  display: inline-block;
  margin: 0 auto -275px auto;
  overflow: hidden;
} 

.center {
  float: left;
  margin: 20px 10px;
  width: $width;
}

.hexagon {
  @include rotate(120deg);
  cursor: pointer;
  height: ($width *2);
  overflow: hidden;
  visibility: hidden;
  width: $width;
}

.hex1 {
  @include rotate(-60deg);
  height: 100%;
  overflow: hidden;
  width: 100%;
}


.hex2 {
  @include rotate(-60deg);
  height: 100%;
  /*@include background-size(($width + ($width * .20)) ($width + ($width * .20)));
  background-position: 50%;*/
  position: relative;
  visibility: visible;
  width: 100%;
}

.desc {
  color: white;
  font-family: 'Lato', sans-serif;
  font-size: 1.5em;
  font-weight: 300;
  height: ($width * 2);
  line-height: 1.5em;
  position: absolute;
  text-align: center;
  text-transform: uppercase; 
  visibility: visible;
  width: $width;
  &.base {
    background: $pink;
  }
  &.one {
    background: $yellow;
  }
  &.two {
    background: $green;
  }
  &.three {
    background: $brown;
  }
  h2 {
    margin: ($width - ($width / 4)) 20px 0 20px;
  }
  p {font-size: .5em; text-transform: lowercase;}
}