Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <!-- Notes: There are small areas where the hover effects don't work along the edges, caused by the overlapping neighboring divs. I don't think it's a big deal, but you could spread out the hexagons more to fix it, or maybe play with z-index on hover. I used the transparent color instead of opacity due to the bug that makes opacity changes look awful during transitions on transformed (rotated) elements. backface-visibility and 3D transform fixes didn't work. -->

<a href="https://codepen.io/timaikens/public/" target="_blank">
  <svg id="thalogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="1600px" height="1600px" viewBox="0 0 1600 1600" enable-background="new 0 0 1600 1600" xml:space="preserve">
    <g>
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#566676" d="M411.367 377.826c259.938-28.359 201.469-15.812 204 397.4 c1.578 247.219-23.391 432.9 65.4 428.672c-260.656 30.016-221.156-16.531-213.547-442.766 C472.836 441 480.2 418.3 411.4 377.8" />
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#566676" d="M595.57 101.888C885.477 85.7 807.1 68.3 820.1 775.3 c4.531 247.157-11.219 434.5 77.5 430.282c-272.172 34.312-220.094 5.703-225.75-444.375 C665.945 293.8 693.4 148.9 595.6 101.9" />
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#566676" d="M818.695 668.935c202.984-21.922 221.984-69.359 214.5 290.5 c-8.031 385-217.062 565.719-352.391 573.547c103.531-59.578 194.25-119.469 203.922-585.062 C889.32 722.3 868.6 688.8 818.7 668.9"
      />
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#566676" d="M1072.914 731.06c24.031 477.11-3 500.3 257.6 470.3 c-88.734 4.266-99.516-209.188-109.328-456.204c-18.281-457.25 1.312-484.125-265.578-460.406 c-61.625 12.609-84.281 60.484-90.734 126.875c-18.781 193.734-16.703 221.1 132.8 202.2 c-9.422-60.516-11.484-269.062 35.344-278.531C1069.367 377.9 1063 430.5 1072.9 731.1"
      />
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#566676" d="M269.477 720.326c150.641-126.047 123.828-30.109 191.4 40.8 C328.555 886.5 344.4 769.6 269.5 720.3" />
    </g>
  </svg>
</a>

<div id="hexcontainer">
  <div class="hex1">
    <div class="hex2">
      <a class="hexlink" id="hl1" href="">
        <div class="hexcover"></div>
        <h3>Beardface</h3>
        <div class="plus"></div>
      </a>
    </div>
  </div>
  <div class="hex1">
    <div class="hex2">
      <a class="hexlink" id="hl2" href="">
        <div class="hexcover"></div>
        <h3>BK Museum</h3>
        <div class="plus"></div>
      </a>
    </div>
  </div>
  <div class="hex1">
    <div class="hex2">
      <a class="hexlink" id="hl3" href="">
        <div class="hexcover"></div>
        <h3>Banyan</h3>
        <div class="plus"></div>
      </a>
    </div>
  </div>

  <br />

  <div class="hex1">
    <div class="hex2">
      <a class="hexlink" id="hl4" href="">
        <div class="hexcover"></div>
        <h3>Blueberries</h3>
        <div class="plus"></div>
      </a>
    </div>
  </div>
  <div class="hex1">
    <div class="hex2">
      <a class="hexlink" id="hl5" href="">
        <div class="hexcover"></div>
        <h3>Bourbon</h3>
        <div class="plus"></div>
      </a>
    </div>
  </div>
  <div class="hex1">
    <div class="hex2">
      <a class="hexlink" id="hl6" href="">
        <div class="hexcover"></div>
        <h3>Boathouse Row</h3>
        <div class="plus"></div>
      </a>
    </div>
  </div>
  <div class="hex1">
    <div class="hex2">
      <a class="hexlink" id="hl7" href="">
        <div class="hexcover"></div>
        <h3>Blue Velvet</h3>
        <div class="plus"></div>
      </a>
    </div>
  </div>

  <br />

  <div class="hex1">
    <div class="hex2">
      <a class="hexlink" id="hl8" href="">
        <div class="hexcover"></div>
        <h3>Barren Landscape</h3>
        <div class="plus"></div>
      </a>
    </div>
  </div>
  <div class="hex1">
    <div class="hex2">
      <a class="hexlink" id="hl9" href="">
        <div class="hexcover"></div>
        <h3>Bucheon Market</h3>
        <div class="plus"></div>
      </a>
    </div>
  </div>
  <div class="hex1">
    <div class="hex2">
      <a class="hexlink" id="hl10" href="">
        <div class="hexcover"></div>
        <h3>Buddhist Temple</h3>
        <div class="plus"></div>
      </a>
    </div>
  </div>
</div>

<p class="notes">All photos are from <a href="https://picsum.photos/">Lorem Picsum</a>.</p>
<p class="notes">Inspiration from <a href="http://builtbybuffalo.com/" target="_blank">Buffalo</a> and <a href="https://www.apidura.com/" target="_blank">Apidura</a>.</p>
              
            
!

CSS

              
                html {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

*, *:before, *:after {
	-webkit-box-sizing:inherit;
	-moz-box-sizing:inherit;
	box-sizing:inherit;
}

body {
	text-align:center;
	background-color:#EEEEEE;
}

html, body {
	margin:0;
	padding:0;
}


/* --- LOGO --- */


#thalogo {
	position:absolute;
	width:100px;
	height:100px;
	top:15px;
	left:25px;
	cursor:pointer;
	z-index:10;
}

#thalogo path {
	fill:#566676;
  -webkit-transition-duration:0.3s;
	-moz-transition-duration:0.3s;
	-o-transition-duration:0.3s;
	transition-duration:0.3s;
}

#thalogo:hover path {
	fill:#D8334A;
}


/* --- HEX LINKS --- */


#hexcontainer {
	position:relative;
	margin:50px 0 35px 0;
	padding:20px 0;
}

.hex1, .hex2 {
	position:relative;
	display:inline-block;
	height:220px;
	width:190px;
	overflow:hidden;
}

.hex1 {
	-webkit-transform:rotate(60deg);
	-moz-transform:rotate(60deg);
	-ms-transform:rotate(60deg);
	-o-transform:rotate(60deg);
	transform:rotate(60deg);
	margin:-20px 10px;
}

.hex2 {
	-webkit-transform:rotate(60deg);
	-moz-transform:rotate(60deg);
	-ms-transform:rotate(60deg);
	-o-transform:rotate(60deg);
	transform:rotate(60deg);
}

.hexlink {
	-webkit-transform:rotate(-120deg);
	-moz-transform:rotate(-120deg);
	-ms-transform:rotate(-120deg);
	-o-transform:rotate(-120deg);
	transform:rotate(-120deg);
	position:relative;
	display:inline-block;
	text-decoration:none;
	height:220px;
	width:190px;
	background-position:center center;
	background-size:cover;
}

#hl1 {background-image:url('https://picsum.photos/200/300/?random&1');}
#hl2 {background-image:url('https://picsum.photos/200/300/?random&2');}
#hl3 {background-image:url('https://picsum.photos/200/300/?random&3');}
#hl4 {background-image:url('https://picsum.photos/200/300/?random&4');}
#hl5 {background-image:url('https://picsum.photos/200/300/?random&5');}
#hl6 {background-image:url('https://picsum.photos/200/300/?random&6');}
#hl7 {background-image:url('https://picsum.photos/200/300/?random&7');}
#hl8 {background-image:url('https://picsum.photos/200/300/?random&8');}
#hl9 {background-image:url('https://picsum.photos/200/300/?random&9');}
#hl10 {background-image:url('https://picsum.photos/200/300/?random&10');}


/* --- OVERLAY --- */


.hexcover {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background-color:transparent;
	opacity:0.9;
}

.hexlink h3 {
	position:absolute;
	top:50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
	width:100%;
	margin:0;
	text-align:center;
	text-transform:uppercase;
	font-family:'Slabo 13px', sans-serif;
	font-size:1.5em;
	font-weight:normal;
	word-spacing:5px;
	color:transparent;
	cursor:pointer;
	opacity:1;
}

.plus {
	position:absolute;
	bottom:16%;
	left:50%;
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	-o-transform:translateX(-50%);
	transform:translateX(-50%);
	height:40px;
	width:40px;
	cursor:pointer;
}

.plus:before, .plus:after {
	content:"";
	position:absolute;
	top:10px;
	left:18px;
	width:4px;
	height:20px;
	border-radius:2px;
	background-color:transparent;
	opacity:1;
}

.plus:after {
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(90deg);
}

@-webkit-keyframes plusBump {
	0%		{width:4px; height:20px; left:18px; top:10px;}
	100%	{width:5px; height:25px; left:17.5px; top:7.5px;}
}
@-moz-keyframes plusBump {
	0%		{width:4px; height:20px; left:18px; top:10px;}
	100%	{width:5px; height:25px; left:17.5px; top:7.5px;}
}
@-o-keyframes plusBump {
	0%		{width:4px; height:20px; left:18px; top:10px;}
	100%	{width:5px; height:25px; left:17.5px; top:7.5px;}
}
@keyframes plusBump {
	0%		{width:4px; height:20px; left:18px; top:10px;}
	100%	{width:5px; height:25px; left:17.5px; top:7.5px;}
}

.hexlink:hover .hexcover {background-color:#C9CFD9;}

.hexlink:hover h3 {color:#566676;}

.hexlink:hover .plus:before, .hexlink:hover .plus:after {
	background-color:#FFFFFF;
	-webkit-animation:plusBump 150ms ease 0.4s 4 alternate;
	-moz-animation:plusBump 150ms ease 0.4s 4 alternate;
	-o-animation:plusBump 150ms ease 0.4s 4 alternate;
	animation:plusBump 150ms ease 0.4s 4 alternate;
}


/* --- BOTTOM BLURB --- */


.notes {
	font-family:'Slabo 13px', sans-serif;
	font-weight:normal;
	color:#566676;
}

.notes a {
	text-decoration:none;
	font-family:'Slabo 13px', sans-serif;
	font-weight:normal;
	color:#D8334A;
}

.notes a:hover {color:#F8536A;}

.hexcover, .hexlink h3, .plus, .plus:before, .plus:after, .notes a {
	-webkit-transition-duration:0.3s;
	-moz-transition-duration:0.3s;
	-o-transition-duration:0.3s;
	transition-duration:0.3s;
}

              
            
!

JS

              
                
              
            
!
999px

Console