Responsive grid of hexagons
Here is the demo and the repositery for the responsive grid of hexagons.
The code here isn't maintained. It was moved to github and improved so comments, issue reporting and contributions should be made there.
This technique uses :
- the
<img>tag - an unordered list : each hexagon is contained in a
<li>tag and an<a>tag - transform rotate and skew to make the hexagon shapes
overflow:hidden;nth-child()to space the hexagons in a regular pattern
And more to create the hexagon grid with the <img> tag.
Hexagon grid features :
- The grid is responsive as it relies on percent widths. The hexagons maintain their aspect ratio with the padding-bottom technique and the images resize to fit the hexagon shape.
- A hover effect over the hexagons : a text slides in with a transparent overlay over the image.
- Each hexagon maintains its boundaries : the hover effect (or click event) for each hexagon only triggered inside the actual shape.
Full code
The following snippet isn't the latest version of the grid. The GitHub repo is maintained and up to date. Issues and contributions can be 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 AND 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) and (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) and (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="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </li></ul>Making a Grid of Hexagons like in builtbybuffalo.com
This is essentially your standard columned layout with a modified row breaking element. (They're using br for this, but it could be any element with the right styling.) There are a few breakpoints and the styles of the classes on the cells and the breaking elements are changed depending on which breakpoint is used. Note that the breaking elements are at the spots where the rows need to break and the classes set on them control which breakpoint uses that breaking element.
They aren't grouping them into rows as you are; there's essentially a single row of elements with carefully placed breaking elements that are shown/hidden depending on which breakpoint is active.
CSS Grid of Hexagons - Display as squares at mobile resolution
You're trying to apply float layout-ing techniques to flex items. It won't do anything. What you want is:
@media (max-width: 768px) {
.hex {
flex: 0 0 50%;
}
}
@media (max-width: 400px) {
.hex {
flex-basis: 100%;
}
}
You could replace flex-basis with width in your particular example:
* { margin: 0; padding: 0;}body { background: rgb(123, 158, 158);}.container{ width: 100%; margin: 0 auto;}#hexGrid { display: flex; flex-wrap: wrap; width: 90%; margin: 0 auto; overflow: hidden; font-family: 'Raleway', sans-serif; font-size: 15px; list-style-type: none;}
.hex { position: relative; visibility:hidden; outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */}.hex::after{ content:''; display:block; padding-bottom: 86.602%; /* = 100 / tan(60) * 1.5 */}.hexIn{ position: absolute; width:96%; padding-bottom: 110.851%; /* = width / sin(60) */ margin:0 2%; overflow: hidden; visibility: hidden; outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */ -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg); -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg); transform: rotate3d(0,0,1,-60deg) skewY(30deg);}.hexIn * { position: absolute; visibility: visible; outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */}.hexLink { display:block; width: 100%; height: 100%; text-align: center; color: #fff; overflow: hidden; -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg); -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg); transform: skewY(-30deg) rotate3d(0,0,1,60deg);}
/*** HEX CONTENT **********************************************************************/.hex img { left: -100%; right: -100%; width: auto; height: 100%; margin: 0 auto; -webkit-transform: rotate3d(0,0,0,0deg); -ms-transform: rotate3d(0,0,0,0deg); transform: rotate3d(0,0,0,0deg);}
.hex h1, .hex p { width: 100%; padding: 5%; box-sizing:border-box; background-color: rgba(0, 128, 128, 0.8); font-weight: 300; -webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out; transition: transform .2s ease-out, opacity .3s ease-out;}.hex h1 { bottom: 50%; padding-top:50%; font-size: 1.5em; z-index: 1; -webkit-transform:translate3d(0,-100%,0); -ms-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0);}.hex h1::after { content: ''; position: absolute; bottom: 0; left: 45%; width: 10%; text-align: center; border-bottom: 1px solid #fff;}.hex p { top: 50%; padding-bottom:50%; -webkit-transform:translate3d(0,100%,0); -ms-transform:translate3d(0,100%,0); transform:translate3d(0,100%,0);}
/*** HOVER EFFECT **********************************************************************/.hexLink:hover h1, .hexLink:focus h1,.hexLink:hover p, .hexLink:focus p{ -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}
/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
#hexGrid{padding-bottom: 4.4%}.hex {width: 20%; /* = 100 / 5 */}.hex:nth-child(9n+6){ /* first hexagon of even rows */margin-left:10%; /* = width of .hex / 2 to indent even rows */}
/*show two columns of squares ???*/@media (max-width: 768px) { #hexGrid{ padding-bottom: 11.2% } .hex { flex: 0 0 50%; } .hex:nth-child(9n+6) { margin-left: 0; } .hexIn, .hexLink, .hex img { -webkit-transform: none; -ms-transform: none; transform: none; }
}/* show one column of squares ???*/@media (max-width: 400px) { .hex { flex-basis: 100%; }}<ul id="hexGrid"> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <a class="hexLink" href="#"> <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="Sample Image" /> <h1>This is a title</h1> <p>Some sample text about the article this hexagon leads to</p> </a> </div> </li> <li class="hex"> <div class="hexIn"> <h1>This is a title</h1>
Related Topics
Transparent Half Circle Cut Out of a Div
What to Use in Place of ::Ng-Deep
Responsively Change Div Size Keeping Aspect Ratio
Why Does Position:Relative; Appear to Change the Z-Index
Freeze the Top Row For an HTML Table Only (Fixed Table Header Scrolling)
How to Change the Color of Radio Buttons
Invert CSS Font-Color Depending on Background-Color
How to Center Text Vertically With a Large Font-Awesome Icon
Rounded Cornes (Border Radius) Safari Issue
What Characters Are Valid in a Url
Is Either Get or Post More Secure Than the Other
Change Select List Option Background Colour on Hover
How to Make a Whole Row in a Table Clickable as a Link
Changing Image on Hover With Css/Html