Hexagonal gallery

HTML
<div class="container"> <div class="hex hex-1 hex-gap"> <div class="inner"> <h4>HOME</h4> <hr /> <p>Home Sweet Home</p> </div> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex hex-2"> <div class="inner"> <h4>ABOUT US</h4> <hr /> <p>We Are The Experts</p> </div> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex hex-3"> <div class="inner"> <h4>CONTACT US</h4> <hr /> <p>We Open Everyday</p> </div> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex" style="background-image: url('http://www.sparkpeople.com/images/ArticlePics/eggs_and_toast.jpg');"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex" style="background-image: url('http://i1.pudelekx.pl/64f965c0985e037bb1ab1d4ff650e541de78afc3/img_8488__880-jpg');"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex" style="background-image: url('http://keymediasolutions.com/wp-content/uploads/japanese-themed-restaurant-benihana-is-one-of-the-most-po_16001206_800843087_1_0_14000700_500-175x175.jpg');"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex" style="background-image: url('http://www.polloalhorno.co/ImagenesPolloAlHorno/ImagenesTop/PolloAlHornoConNaranja.jpg');"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex hex-gap" style="background-image: url(http://images.recipebridge.com/rim/412/130845/r_175.jpg);"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex" style="background-image: url(http://kintakun-collection.co.id/wp-content/uploads/2015/02/6968914-food-mexican-chips-snacks-cheese-spices-olives-175x175.jpg);"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex" style="background-image: url('http://www.sparkcoach.com/images/ArticlePics/sandwich.jpg');"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex" style="background-image: url('http://a2.mzstatic.com/us/r30/Purple/v4/43/2e/63/432e6372-04f8-915a-ed93-78d706b5de02/mzl.vykagjdg.175x175-75.jpg');"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex" style="background-image: url('http://www.sparkpeople.com/news/genericpictures/pizza5.jpg');"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex" style="background-image: url('http://images.talkingphonebook.com/images/timesunion/media_library/320/444/media6.jpg');"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex" style="background-image: url('http://www.depositagift.com/uploads/bank_assets/images/Honeymoon/Resort/Spices.JPG');"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex hex-gap" style="background-image: url('https://www.cancercompass.com/images/recipe/Seafood/seared-salmon.jpg');"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex" style="background-image: url('http://vkuso.ru/img/solenaya-krasnaya-ryba-iz-morozilki-175x175.jpg');"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> <div class="hex" style="background-image: url('http://otvet.zp.ua/uploads/news/00004370b.jpg');"> <a href="#"></a> <div class="corner-1"></div> <div class="corner-2"></div> </div> </div>
CSS
body { font-family:arial; font-size:12px; background: #F35E5C; margin:0; padding:0; } #info { background:#333; opacity:0.8; position: absolute; top:5px; right:5px; width:280px; color:#fff; border-radius: 5px; z-index:10 } #info p { padding:0 10px; } a { text-decoration:none; color: #3e8ed7; } a:hover { color: #61b7e6; } .container { width:700px; height:100%; position:absolute; top:50px; left:50%; margin-left:-350px; } /* HEXAGON STARTS HERE */ .hex { width:150px; height:86px; background-color: #ccc; background-repeat: no-repeat; background-position: 50% 50%; -webkit-background-size: auto 173px; -moz-background-size: auto 173px; -ms-background-size: auto 173px; -o-background-size: auto 173px; position: relative; float:left; margin:25px 5px; text-align:center; zoom:1; } .hex.hex-gap { margin-left: 86px; } .hex a { display:block; width: 100%; height:100%; text-indent:-9999em; position:absolute; top:0; left:0; } .hex .corner-1, .hex .corner-2 { position: absolute; top:0; left:0; width:100%; height:100%; background: inherit; z-index:-2; overflow:hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .hex .corner-1 { z-index:-1; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); } .hex .corner-2 { -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg); transform: rotate(-60deg); } .hex .corner-1:before, .hex .corner-2:before { width: 173px; height: 173px; content: ''; position: absolute; background: inherit; top:0; left: 0; z-index: 1; background: inherit; background-repeat:no-repeat; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .hex .corner-1:before { -webkit-transform: rotate(-60deg) translate(-87px, 0px); -moz-transform: rotate(-60deg) translate(-87px, 0px); -ms-transform: rotate(-60deg) translate(-87px, 0px); -o-transform: rotate(-60deg) translate(-87px, 0px); transform: rotate(-60deg) translate(-87px, 0px); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } .hex .corner-2:before { -webkit-transform: rotate(60deg) translate(-48px, -11px); -moz-transform: rotate(60deg) translate(-48px, -11px); -ms-transform: rotate(60deg) translate(-48px, -11px); -o-transform: rotate(60deg) translate(-48px, -11px); transform: rotate(60deg) translate(-48px, -11px); bottom:0; } /* Custom styles*/ .hex .inner { color:#eee; } .hex h4 { font-family: 'Josefin Sans', sans-serif; margin:0; } .hex hr { border:0; border-top:1px solid #eee; width:60%; margin:15px auto; } .hex p { font-size:16px; font-family: 'Kotta One', serif; width:80%; margin:0 auto; } .hex.hex-1 { background: #74cddb; } .hex.hex-2 { background: #f5c53c; } .hex.hex-3 { background: #80b971; }
JAVASCRIPT
Expand for more options Login