<div class="grid">
    <img src="https://images.unsplash.com/photo-1458682625221-3a45f8a844c7?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=71fe1cccc16ab8dbd431de076c68802b" alt="">
    <img src="https://images.unsplash.com/photo-1513242099395-c91667521412?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b990dfeb877fd901c68b4b2a9ec281db" alt="">
    <h1>Using Mixed Blend Mode is Amazingly Useful</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec purus libero, blandit at risus in, interdum dignissim risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
</div>
.grid {
    display: grid;
    grid-template-columns: 1fr 5vw 5vw 1fr 3vw;
    grid-auto-rows: minmax(10vh, 1fr);
    
    img {
        grid-row: 1 / 3;
        grid-column: 1 / 4;
        z-index: 1;
        mix-blend-mode: hard-light;
        height: 100%;
        width: 100%;
        object-fit: cover;
        clip-path: polygon(0 0, 75% 0, 100% 100%, 0 100%);
    }
    h1 {
        grid-column: 1 / 5;
        grid-row: 1 / 2;
        color: #AEEA00;
        z-index: 100;
        font-size: 80px;
        text-align: right;
        margin: 0;
        align-self: end;
        mix-blend-mode: color-dodge;
    }
    p {
        grid-column: 4 / 5; 
    }
}

img {max-width: 100%;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.