Clipped overlapping grid items

clipped-overlapping-grid-items.markdown

Clipped overlapping grid items

A Pen by hristov. on CodePen.

License.

index.html

<div class="row">
    <div class="box box--left">
        <div class="box__inner">
            <a href="#">
                <img src="https://source.unsplash.com/random/1024x600" alt="">
            </a>
        </div>
    </div>

    <div class="box box--right">
        <div class="box__inner">
            <a href="#">
                <img src="https://source.unsplash.com/random/1024x601" alt="">
            </a>
        </div>
    </div>

    <div class="box box--left box--small">
        <div class="box__inner">
            <a href="#">
                <img src="https://source.unsplash.com/random/1024x602" alt="">
            </a>
        </div>
    </div>

    <div class="box box--right box--small">
        <div class="box__inner">
            <a href="#">
                <img src="https://source.unsplash.com/random/1024x603" alt="">
            </a>
        </div>
    </div>
</div>

style.scss

* {
    box-sizing: border-box;
}

.row {
    padding: 0.75vw;

    display: grid;
    grid-template-columns: repeat(64, 1fr);
    grid-template-rows: 55vh 30vh;
    grid-row-gap: 0.75vw;
}

.box a {
    display: block;
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;

    &:hover img {
        opacity: 0.75;
    }
}

.box__inner {
    background-color: #005696;
    width: 100%;
    height: 100%;
    position: relative;

    img {
        width: 100%;
        height: 100%;

        object-position: 50% 50%;
        object-fit: cover;
        
        transition: opacity .2s ease-out;
    }
}

.box--left {
    clip-path: polygon(0 0, 98% 0, 83% 100%, 0 100%);
    grid-row: 1;
    grid-column: 1 / span 35;
}

.box--right {
    clip-path: polygon(17% 0, 100% 0, 100% 100%, 2% 100%);
    grid-row: 1;
    grid-column: span 35 / -1;
}

.box--small {
    grid-row: 2;
    
    &.box--left {
        clip-path: polygon(0 0, 83% 0, 98% 100%, 0 100%);
    }
    
    &.box--right {
        clip-path: polygon(2% 0, 100% 0, 100% 100%, 17% 100%);
    }
}