<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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://www.sub5zero.com/wp-content/uploads/2016/08/surfing-1050x525.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://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://www.visitmexico.com/work/models/VisitMexico30/WebPage/Ensenada_la_cuna_del_surf/photoEscudo_Ensenada_la_cuna_del_surf_surfensenadaheader.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('https://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('http://www.rawstory.com/wp-content/uploads/2015/05/A-man-surfing-Shutterstock-800x430.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://img.grouponcdn.com/deal/pZW1AwwkaLpzZ16v6Sv1/kM-2048x1229/v1/c700x420.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://www.destination360.com/europe/portugal/images/s/portugal-surf.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_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('http://www.sanclementeguide.com/img/surfing-san-clemente.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://upload.wikimedia.org/wikipedia/commons/c/c2/1999_-_Surf_%C3%A0_Waikiki_Beach_Honolulu_Hawa%C3%AF.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> $(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); }); }); }); </script>

/* Thanks to dmac37 for this hex technique */ @import url(https://fonts.googleapis.com/css?family=Lato:300); /* Variables */ h1 { font-family: 'Lato', sans-serif; font-size: 4em; font-weight: 300; text-align: center; margin: 100px 10px 0 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: 220px; } .hexagon { -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); transform: rotate(120deg); cursor: pointer; height: 440px; overflow: hidden; visibility: hidden; width: 220px; } .hex1 { -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: rotate(-60deg); height: 100%; overflow: hidden; width: 100%; } .hex2 { -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: 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: 440px; line-height: 1.5em; position: absolute; text-align: center; text-transform: uppercase; visibility: visible; width: 220px; } .desc.base { background: rgba(230, 0, 98, 0.75); } .desc.one { background: rgba(252, 171, 55, 0.75); } .desc.two { background: rgba(169, 160, 50, 0.75); } .desc.three { background: rgba(83, 70, 54, 0.75); } .desc h2 { margin: 165px 20px 0 20px; } .desc p { font-size: .5em; text-transform: lowercase; }