Hexagon Gallery

Niq's OA Resources

Hexagon Gallery

This is a gallery made of hexagons that adjust the amount via screen size. It's not necessarily responsive, just meticulously math'd out. You can change the anchor and div background images, and the "hvr-shrink" class, but be careful making other changes to the code.

You can add and remove as many hexagons as you please, it's set up for that.

Code:

<link href="/js/lightbox2/src/css/lightbox.css" rel="stylesheet" />
<script type="text/javascript" src="/js/lightbox2/src/js/lightbox.js" ></script>

<div class="row">
    <div class="medium-12 columns" style="padding: 65px 0px;">
        <div class="HexagonRow">
            
            <a class="hvr-shrink" data-title="My caption" data-lightbox="gallery" href="/wahelper/GetImage?id=245952">
                <div class="hexagon">
                    <div class="hexagon-in1">
                        <div class="hexagon-in2" style="background-image: url('/wahelper/GetImage?id=245952');"></div>
                    </div>
                </div>
            </a>
            
            <a class="hvr-shrink" data-title="My caption" data-lightbox="gallery" href="/wahelper/GetImage?id=257937">
                <div class="hexagon">
                    <div class="hexagon-in1">
                        <div class="hexagon-in2" style="background-image: url('/wahelper/GetImage?id=257937');"></div>
                    </div>
                </div>
            </a>
            
            <a class="hvr-shrink" data-title="My caption" data-lightbox="gallery" href="/wahelper/GetImage?id=259287">
                <div class="hexagon">
                    <div class="hexagon-in1">
                        <div class="hexagon-in2" style="background-image: url('/wahelper/GetImage?id=259287');"></div>
                    </div>
                </div>
            </a>
            
            <a class="hvr-shrink" data-title="My caption" data-lightbox="gallery" href="/wahelper/GetImage?id=260756">
                <div class="hexagon">
                    <div class="hexagon-in1">
                        <div class="hexagon-in2" style="background-image: url('/wahelper/GetImage?id=260756');"></div>
                    </div>
                </div>
            </a>
            
            <a class="hvr-shrink" data-title="My caption" data-lightbox="gallery" href="/wahelper/GetImage?id=260861">
                    <div class="hexagon"><div class="hexagon-in1">
                        <div class="hexagon-in2" style="background-image: url('/wahelper/GetImage?id=260861');"></div>
                    </div>
                </div>
            </a>
            
            <a class="hvr-shrink" data-title="My caption" data-lightbox="gallery" href="/wahelper/GetImage?id=260958">
                <div class="hexagon">
                    <div class="hexagon-in1">
                        <div class="hexagon-in2" style="background-image: url('/wahelper/GetImage?id=260958');"></div>
                    </div>
                </div>
            </a>
            
            <a class="hvr-shrink" data-title="My caption" data-lightbox="gallery" href="/wahelper/GetImage?id=260977">
                <div class="hexagon">
                    <div class="hexagon-in1">
                        <div class="hexagon-in2" style="background-image: url('/wahelper/GetImage?id=260977');"></div>
                    </div>
                </div>
            </a>
            
        </div>
    </div>
</div>

<style>
.HexagonRow {
    max-width: 1000px;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
@media screen and (min-width: 1017px) {
    .HexagonRow a:nth-child(7n-2){
        margin-left: 5%;
    }
    .HexagonRow a:nth-child(7n){
        margin-right: 5%;
    }
    .hexagon{
        width: 240px;
        height: 300px;
    }
    .HexagonRow a{
        margin: -42px 5px;
    }
}
@media screen and (min-width: 476px) and (max-width: 1016px) {
    .hexagon {
        width: 30vw;
        height: 34.6875vw;
    }
    .HexagonRow a{
        margin: -3.75vw 5px;
    }
    .HexagonRow a:nth-child(5n-1){
        margin-left: 13%;
    }
    .HexagonRow a:nth-child(5n){
        margin-right: 13%;
    }
}
@media screen and (max-width: 475px) {
    .hexagon {
        width: 45vw !important;
        height: 56.25vw !important;
    }
    .HexagonRow a{
        margin: -8vw .6vw;
    }
    .HexagonRow a:nth-child(3n){
        margin-right: 13%;
        margin-left: 13%;
    }
} 
.hexagon {
    overflow: hidden;
    transform: rotate(120deg);
    }
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    transform: rotate(-60deg);
    }
.hexagon-in2 {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #006666;
    visibility: visible;
    transform: rotate(-60deg);
    }
</style>

Powered by Online Access All Rights Reserved © 2001-2024