Skip to content

Instantly share code, notes, and snippets.

@raylinmarie

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

Created May 2, 2014 17:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save raylinmarie/11480923 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save raylinmarie/11480923 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Josh Howenstine.
Raw
Hexagon-Image-Tiles-with-Hover-Desc.markdown
Raw
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>
Raw
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);
});
});
});
Raw
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;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment