JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="500" height="300" viewBox="0 0 500 300">
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="300">
            <image xlink:href="http://lorempixel.com/600/300/animals" x="0" y="0" width="600" height="300" />
        </pattern>
        <pattern id="img2" patternUnits="userSpaceOnUse" width="600" height="300">
            <image xlink:href="http://lorempixel.com/600/300/people" x="0" y="0" width="600" height="300" />
        </pattern>
    </defs>
    <polygon id="top" points="0,20 500,0 500,170 0,130" fill="url(#img1)" />
    <polygon id="bottom" points="0,130 500,170 500,280 0,300" fill="url(#img2)" />
</svg>

CSS

polygon {
    opacity:0.4;
    transition:all 0.5s;
}

polygon:hover {
    opacity:1;
}