JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<div class="wrapper">
    <div class="cell">
        <div class="bg" style="background-image: url(https://jstimac.com/images/cppGame.png)">
            <div class="hoverSection"></div>
        </div>
    </div>
    <div class="cell">
        <div class="bg" style="background-image: url(https://jstimac.com/images/squareCities.png)">
            <div class="hoverSection"></div>
        </div>
    </div>
    <div class="cell">
        <div class="bg" style="background-image: url(https://jstimac.com/images/golfGame.png)">
            <div class="hoverSection"></div>
        </div>
    </div>
    <div class="cell">
        <div class="bg" style="background-image: url(https://jstimac.com/images/linesAndCircles.png)">
            <div class="hoverSection"></div>
        </div>
    </div>
    <div class="cell">
        <div class="bg" style="background-image: url(https://jstimac.com/images/waterfall.png)">
            <div class="hoverSection"></div>
        </div>
    </div>
</div>

SCSS

body{
    margin: 0;
    background: #242625;
}

$angle: 6deg;
$angleFactor: 9%;

.wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.cell{
    transform: skew(0, $angle);
    //flex-grow: 1;
    width: 49%;
    height: 0px;
    padding-top: 30%;
    overflow: hidden;
    position: relative;
    
    .bg{
        position: absolute;
        top: -$angleFactor;
        left: 0;
        right: 0;
        bottom: -$angleFactor;
        transform: skew(0, -$angle);
        background-size: cover;
    }
    
    .hoverSection{
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.3);
        transition: opacity 0.2s;
    }
    
    &:hover .hoverSection{
        opacity: 1;
    }
    
    &:hover .bg{
        //filter: blur(5px);
    }
}