html - Responsive grid of hexagons -
i loaded in multiple images on website internet. possible give images hexagon shape in responsive grid?
<div> <img src="link" class="image"> </div> <div> <img src="link" class="image"> </div> ... i found multiple ways needed fill in image src in css code. isnt possible me cause website loads in random images internet jquery can't use background images.
i tried this: http://jsfiddle.net/8f5m5wv0/
here demo , repositery responsive grid of hexagons. the code here isn't maintained. moved github , improved comments, issue reporting , contributions should made there.
this technique uses :
- the
<img>tag - an unordered list : each hexagon contained in
<li>tag ,<a>tag - transform rotate , skew make hexagon shapes
overflow:hidden;nth-child()space hexagons in regular pattern
and more create hexagon grid <img> tag.
hexagon grid features :
- the grid responsive relies on percent widths. hexagons maintain aspect ratio padding-bottom technique , images resize fit hexagon shape.
- a hover effect on hexagons : text slides in transparent overlay on image.
- each hexagon maintains boundaries : hover effect (or click event) each hexagon triggered inside actual shape.
full code
the following snippet isn't latest version of grid. github repo maintained , date. issues , contributions can made there.
* { margin: 0; padding: 0; } body { font-family: 'open sans', arial, sans-serif; background: rgb(123, 158, 158); } #hexgrid { overflow: hidden; width: 90%; margin: 0 auto; padding:0.707% 0; } #hexgrid:after { content: ""; display: block; clear: both; } .hex { position: relative; list-style-type: none; float: left; overflow: hidden; visibility: hidden; -webkit-transform: rotate(-60deg) skewy(30deg); -ms-transform: rotate(-60deg) skewy(30deg); transform: rotate(-60deg) skewy(30deg); } .hex * { position: absolute; visibility: visible; } .hexin { display:block; 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; backface-visibility: hidden; } /* hex content */ .hex img { left: -100%; right: -100%; width: auto; height: 100%; margin: 0 auto; } .hex h1, .hex 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; transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out; } .hex h1 { bottom: 110%; font-style: italic; font-weight: normal; font-size: 1.5em; padding-top: 100%; padding-bottom: 100%; } .hex h1:after { content: ''; display: block; position: absolute; bottom: -1px; left: 45%; width: 10%; text-align: center; z-index: 1; border-bottom: 2px solid #fff; } .hex p { padding-top: 50%; top: 110%; padding-bottom: 50%; } /* hover effect */ .hexin:hover h1 { bottom: 50%; padding-bottom: 10%; } .hexin:hover p { top: 50%; padding-top: 10%; } /* spacing , sizing */ @media (min-width:1201px) { .hex { width: 19.2%; /* = (100-4) / 5 */ padding-bottom: 22.170%; /* = width / sin(60deg) */ } .hex:nth-child(9n+6), .hex:nth-child(9n+7), .hex:nth-child(9n+8), .hex:nth-child(9n+9) { margin-top: -4.676%; margin-bottom: -4.676%; -webkit-transform: translatex(50%) rotate(-60deg) skewy(30deg); -ms-transform: translatex(50%) rotate(-60deg) skewy(30deg); transform: translatex(50%) rotate(-60deg) skewy(30deg); } .hex:nth-child(9n+6):last-child, .hex:nth-child(9n+7):last-child, .hex:nth-child(9n+8):last-child, .hex:nth-child(9n+9):last-child { margin-bottom: 0; } .hex:nth-child(9n+6) { margin-left: 0.5%; clear: left; } .hex:nth-child(9n+10) { clear: left; } .hex:nth-child(9n+2), .hex:nth-child(9n+ 7) { margin-left: 1%; margin-right: 1%; } .hex:nth-child(9n+3), .hex:nth-child(9n+4), .hex:nth-child(9n+8) { margin-right: 1%; } } @media (max-width: 1200px) , (min-width:901px) { .hex { width: 24.25%; /* = (100-3) / 4 */ padding-bottom: 28.001%; /* = width / sin(60deg) */ } .hex:nth-child(7n+5), .hex:nth-child(7n+6), .hex:nth-child(7n+7) { margin-top: -6.134%; margin-bottom: -6.134%; -webkit-transform: translatex(50%) rotate(-60deg) skewy(30deg); -ms-transform: translatex(50%) rotate(-60deg) skewy(30deg); transform: translatex(50%) rotate(-60deg) skewy(30deg); } .hex:nth-child(7n+5):last-child, .hex:nth-child(7n+6):last-child, .hex:nth-child(7n+7):last-child { margin-bottom: 0; } .hex:nth-child(7n+2), .hex:nth-child(7n+6) { margin-left: 1%; margin-right: 1%; } .hex:nth-child(7n+3) { margin-right: 1%; } .hex:nth-child(7n+8) { clear: left; } .hex:nth-child(7n+5) { clear: left; margin-left: 0.5%; } } @media (max-width: 900px) , (min-width:601px) { .hex { width: 32.666%; /* = (100-2) / 3 */ padding-bottom: 37.720%; /* = width / sin(60) */ } .hex:nth-child(5n+4), .hex:nth-child(5n+5) { margin-top: -8.564%; margin-bottom: -8.564%; -webkit-transform: translatex(50%) rotate(-60deg) skewy(30deg); -ms-transform: translatex(50%) rotate(-60deg) skewy(30deg); transform: translatex(50%) rotate(-60deg) skewy(30deg); } .hex:nth-child(5n+4):last-child, .hex:nth-child(5n+5):last-child { margin-bottom: 0; } .hex:nth-child(5n+4) { margin-right: 1%; margin-left: 0.5%; } .hex:nth-child(5n+2) { margin-left: 1%; margin-right: 1%; } .hex:nth-child(5n+6) { clear: left; } } @media (max-width: 600px) { .hex { width: 49.5%; /* = (100-1) / 2 */ padding-bottom: 57.158%; /* = width / sin(60) */ } .hex:nth-child(3n+3) { margin-top: -13.423%; margin-bottom: -13.423%; -webkit-transform: translatex(50%) rotate(-60deg) skewy(30deg); -ms-transform: translatex(50%) rotate(-60deg) skewy(30deg); transform: translatex(50%) rotate(-60deg) skewy(30deg); } .hex:nth-child(3n+3):last-child { margin-bottom: 0; } .hex:nth-child(3n+3) { margin-left: 0.5%; } .hex:nth-child(3n+2) { margin-left: 1%; } .hex:nth-child(3n+4) { clear: left; } }<link href='http://fonts.googleapis.com/css?family=open+sans:400italic,700italic,800italic,400,700,800' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=raleway:400,700,300,200,100,900' rel='stylesheet' type='text/css'> <ul id="hexgrid"> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexin" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" /> <h1>this title</h1> <p>some sample text article hexagon leads to</p> </a> </li> </ul>changing number of hexagons per row
the grid adapts number of hexagons per row according viewport width 5 on screens wider 1200px 2 on screens narrower 600px.
if don't need media queries want change number of hexagons per row, can keep css corresponding media query , remove unneeded ones.
for more customization, see sizing , spacing of hexagons.
demos
for list of demos, see codepen collection: responsive grids of hexagons different numbers of hexagons per row, centering options , more...
here original codepen demo .pusher element make irregular grid of hexagons. .pusher element used make "holes" in grid empty hexagons.
Comments
Post a Comment