" CSS responsive grid of hexagons "
Bootstrap 3.0.0 Snippet by harunpehlivan

<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 ----------> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Raleway:400,700,300,200,100,900' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'> <ul id="categories" class="clr"> <li class="pusher"></li> <li> <div> <img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1506605801" alt=""/> <h1>HARUN PEHLİVAN</h1> <p><a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a></p> </div> </li> <li> <div> <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fhpitgroupwebdesignstudio.bitballoon.com?w=360" alt=""/> <h1>HP IT GROUP Web Design Studio</h1> <p><a href="http://hpitgroupwebdesignstudio.bitballoon.com" target="_blank">HP IT GROUP Web Design Studio</a></p> </div> </li> <li> <div> <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" alt=""/> <h1> TERCUMAN BİLİŞİM MERKEZİ</h1> <p> <a href="http://tercuman-bilisim-mer.ticiz.com" target="_blank"> TERCUMAN BİLİŞİM MERKEZİ</a></p> </div> </li> <li> <div> <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.thefanbase.net?w=360" alt=""/> <h1>HARUN PEHLİVAN</h1> <p> <a href="http://harunpehlivan.thefanbase.net/" target="_blank"> HARUN PEHLİVAN</a> </p> </div> </li> <li class="pusher"></li> <li> <div> <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.jimdo.com?w=360" alt=""/> <h1>Islamic sciences and IT computer science</h1> <p> <a href="https://harunpehlivan.jimdo.com/" target="_blank">Islamic sciences and IT computer science</a> </p> </div> </li> <li> <div> <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.business.site?w=360" alt=""/> <h1>TEBİTAGEM</h1> <p> <a href="http://harunpehlivantebimtebitagem.business.site/" target="_blank">TEBİTAGEM</a> </p> </div> </li> <li class="pusher"></li> <li> <div> <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebm.wordpress.com?w=360" alt=""/> <h1>INFORMATION TECHNOLOGY</h1> <p> <a href="https://tebm.wordpress.com/" target="_blank">CLICK</a></p> </div> </li> <li> <div> <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagemmobile.bitballoon.com?w=360" alt=""/> <h1>MOBİLE BROWSER</h1> <p> <a href="http://harunpehlivantebimtebitagemmobile.bitballoon.com/" target="_blank">CLICK</a> </p> </div> </li><li> <div> <img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.bitballoon.com?w=360" alt=""/> <h1>HE THERE</h1> <p><a href="http://harunpehlivantebimtebitagem.bitballoon.com/" target="_blank">CLICK</a> </p> </div> </li> </ul> <a id="fork" target="_blank" href="https://github.com/harunpehlivan">Fork on GitHub</a>
body{ font-family: 'Open Sans', arial, sans-serif; background:rgb(123, 158, 158); } *{ margin:0; padding:0; } #categories{ overflow:hidden; width:90%; margin:0 auto; } .clr:after{ content:""; display:block; clear:both; } #categories li{ position:relative; list-style-type:none; width:27.85714285714286%; /* = (100-2.5) / 3.5 */ padding-bottom: 32.16760145166612%; /* = width /0.866 */ float:left; overflow:hidden; visibility:hidden; -webkit-transform: rotate(-60deg) skewY(30deg); -ms-transform: rotate(-60deg) skewY(30deg); transform: rotate(-60deg) skewY(30deg); } #categories li:nth-child(3n+2){ margin:0 1%; } #categories li:nth-child(6n+4){ margin-left:0.5%; } #categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) { margin-top: -6.9285714285%; margin-bottom: -6.9285714285%; -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg); -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg); transform: translateX(50%) rotate(-60deg) skewY(30deg); } #categories li:nth-child(6n+4):last-child, #categories li:nth-child(6n+5):last-child, #categories li:nth-child(6n+6):last-child{ margin-bottom:0%; } #categories li *{ position:absolute; visibility:visible; } #categories li > div{ width:100%; height:100%; text-align:center; color:#fff; overflow:hidden; -webkit-transform: skewY(-30deg) rotate(60deg); -ms-transform: skewY(-30deg) rotate(60deg); transform: skewY(-30deg) rotate(60deg); -webkit-backface-visibility:hidden; } /* HEX CONTENT */ #categories li img{ left:-100%; right:-100%; width: auto; height:100%; margin:0 auto; } #categories div h1, #categories div p{ width:90%; padding:0 5%; background-color:#008080; background-color: rgba(0, 128, 128, 0.8); font-family: 'Raleway', sans-serif; -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; -ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; } #categories li h1{ bottom:110%; font-style:italic; font-weight:normal; font-size:1.5em; padding-top:100%; padding-bottom:100%; } #categories li h1:after{ content:''; display:block; position:absolute; bottom:-1px; left:45%; width:10%; text-align:center; z-index:1; border-bottom:2px solid #fff; } #categories li p{ padding-top:50%; top:110%; padding-bottom:50%; } /* HOVER EFFECT */ #categories li div:hover h1 { bottom:50%; padding-bottom:10%; } #categories li div:hover p{ top:50%; padding-top:10%; } #fork{ position:fixed; top:0; left:0; color:#000; text-decoration:none; border:1px solid #000; padding:.5em .7em; margin:1%; transition: color .5s; overflow:hidden; } #fork:before { content: ''; position: absolute; top: 0; left: 0; width: 130%; height: 100%; background: #000; z-index: -1; transform-origin:0 0 ; transform:translateX(-100%) skewX(-45deg); transition: transform .5s; } #fork:hover { color: #fff; } #fork:hover:before { transform: translateX(0) skewX(-45deg); }

Related: See More


Questions / Comments: