Hexagon gallery with CSS3

Hexagons.php

<div class="hexagons">
    <div class="hexagons__row">
        <div class="hexagon">
            <div class="hexagon__image" style="background-image: url('image.jpg');"></div>
            <div class="hexagon__description">
                <h5>Description title</h5>
                <p>Description content</p>
            </div>
        </div>
        <div class="hexagon">
            <div class="hexagon__image" style="background-image: url('image.jpg');"></div>
            <div class="hexagon__description">
                <h5>Description title</h5>
                <p>Description content</p>
            </div>
        </div>
    </div>
    
    <div class="hexagons__row">
        <div class="hexagon">
            <div class="hexagon__image" style="background-image: url('image.jpg');"></div>
            <div class="hexagon__description">
                <h5>Description title</h5>
                <p>Description content</p>
            </div>
        </div>
        <div class="hexagon">
            <div class="hexagon__image" style="background-image: url('image.jpg');"></div>
            <div class="hexagon__description">
                <h5>Description title</h5>
                <p>Description content</p>
            </div>
        </div>
        <div class="hexagon">
            <div class="hexagon__image" style="background-image: url('image.jpg');"></div>
            <div class="hexagon__description">
                <h5>Description title</h5>
                <p>Description content</p>
            </div>
        </div>
    </div>
    
    <div class="hexagons__row">
        <div class="hexagon">
            <div class="hexagon__image" style="background-image: url('image.jpg');"></div>
            <div class="hexagon__description">
                <h5>Description title</h5>
                <p>Description content</p>
            </div>
        </div>
        <div class="hexagon">
            <div class="hexagon__image" style="background-image: url('image.jpg');"></div>
            <div class="hexagon__description">
                <h5>Description title</h5>
                <p>Description content</p>
            </div>
        </div>
    </div>
</div>

Hexagons.scss

.hexagons {
    display         : flex;
    justify-content : center;
    flex-flow       : column;

    &__row {
        display         : flex;
        justify-content : center;
    }
}

.hexagon {
    @include transition;
    flex        : 1;
    position    : relative;
    overflow    : hidden;
    display     : flex;
    flex-flow   : column;
    align-items : center;
    text-align  : center;

    &__image {
        @include hexagon;
        //width               : 140px;
        width               : 165px;
        height              : 165px;
        background-size     : contain;
        background-position : center center;
        background-repeat   : no-repeat;
    }

    &__description {
        @include transition;
        padding : .5rem;
    }

    &:hover {
        .hexagon__description {
            left : 0;
        }
    }
}

@include media-breakpoint-up(md) {
    .hexagons {
        &__row {
            // Top row
            &:nth-child(1) {
                transform : translateY(50px); // 57px

                // Top left
                & > .hexagon:nth-child(1) {
                    transform : translateX(-3.5px);
                }
                // Top right
                & > .hexagon:nth-child(2) {
                    transform : translateX(3.5px);
                }
            }

            // Center row
            &:nth-child(2) {
                // Left
                & > .hexagon:nth-child(1) {
                    transform : translateX(-7px);
                }
                // Right
                & > .hexagon:nth-child(3) {
                    transform : translateX(7px);
                }
            }

            // Third row
            &:nth-child(3) {
                transform : translateY(-50px); // -57px

                // Bottom left
                & > .hexagon:nth-child(1) {
                    transform : translateX(-3.5px);
                }
                // Bottom right
                & > .hexagon:nth-child(2) {
                    transform : translateX(3.5px);
                }
            }
        }
    }

    .hexagon {
        flex      : inherit;
        min-width : 200px;
        height    : 230px;
        @include hexagon;
        flex-flow : row;

        &__image {
            width             : auto;
            height            : auto;
            -webkit-clip-path : none;
            clip-path         : none;
            position          : absolute;
            top               : 0;
            right             : 0;
            left              : 0;
            bottom            : -20px;
            img {
                width  : auto;
                height : 100%;
            }
        }

        &__description {
            position   : absolute;
            padding    : 30% 1rem;
            left       : -100%;
            top        : 0;
            bottom     : 0;
            height     : 100%;
            width      : 100%;
            color      : $white;
            background : rgba(0, 0, 0, .7);

            p {
                display : none;
            }
        }

        & + .hexagon {
            margin-top : 0;
        }
    }
}

@include media-breakpoint-only(lg) {
    .hexagons {
        transform  : scale(.75);
        margin-top : -7rem;
    }
}

@include media-breakpoint-only(xl) {
    .hexagons {
        margin-top : -5rem;
    }
}