Hexagon Grid

for help on stack

by Adrian Carriger

HTML

<div class="container">
            <div class="memories">
                
                <ul id="hexGrid" class="grid">
                    <li class="hex">
                        <a class="hexIn" href="#">
                            <img src="https://s31.postimg.org/jud6g2o23/cube.png" alt="" />
                            <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://s31.postimg.org/jud6g2o23/cube.png" alt="" />
                            <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://s31.postimg.org/jud6g2o23/cube.png" alt="" />
                            <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://s31.postimg.org/jud6g2o23/cube.png" alt="" />
                            <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://s31.postimg.org/jud6g2o23/cube.png" alt="" />
                            <h1>This is a title</h1>
                            <p>Some sample text about the article this hexagon leads to</p>
                        </a>
...

CSS

* {
    margin: 0;
    padding: 0;
}

#hexGrid {
    overflow: hidden;
    width: 300px;
    margin: 0 auto;
    padding:0.866% 0;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
}
#hexGrid:after {
    content: "";
    display: block;
    clear: both;
}
.hex {
    position: relative;
    list-style-type: none;
    float: left;
    overflow: hidden;
    visibility: hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
        -ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
            transform: rotate(-60deg) skewY(30deg) translatez(-1px);
}
.hex * {
    position: absolute;
    visibility: visible;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.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);
}

/*** HEX CONTENT **********************************************************************/
.hex img {
    left: -100%;
    right: -100%;
    width: auto;
    height: 100%;
    margin: 0 auto;
}

.hex h1, .hex p {
    width: 102%;
    left:-1%; /* prevent line on the right where background doesn't cover image */
    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:translateY(-100%) translatez(-1px);
        -ms-transform:translateY(-100%) translatez(-1px);
            transform:translateY(-100%) translatez(-1px);
}
.hex h1:after {
    content: '';
 ...