JSFiddle - React, Tailwind, and code Playground

by Daniel Redwood

HTML

<section>
    <div class="zoom rotated-right">
        <div class="rotated-left child medium"></div>
    </div>
</section>

CSS

section {
    width: 100%;
    height: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: url(http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52d99ef4bf45c_1.JPG) center 0 no-repeat;
    background-attachment: fixed;
}

    div.zoom {
        width: 800px;
        height: 800px;
        position: absolute;
        left: 50%;
        bottom: 0;
        margin: 0 0 -400px -400px;
        overflow: hidden;
    }
        div.child.medium {
            width: 1600px;
            height: 1600px;
            background: url(http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52d99ef4bf45c_1.JPG) center 0 no-repeat;
            background-attachment: fixed;
            margin: 0 0 0 -500px;
        }

.rotated-right {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.rotated-left {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}