JSFiddle - React, Tailwind, and code Playground

HTML

<div id="skewed">
    <div id="top"></div>
    <div id="bottom"></div>
</div>

CSS

#skewed {
    position:relative;
    margin-top:20px;
	width: 500px;
	height: 300px;
    transform: skewY(-2deg);
	-webkit-transform: skewY(-2deg);
	-moz-transform: skewY(-2deg);
	-o-transform: skewY(-2deg);
    overflow:hidden;
    background:black;
    -webkit-backface-visibility: hidden;
}

#skewed div {
    position:absolute;
    height:200px;
    width:500px;
    transform: skewY(4deg);
    -webkit-transform: skewY(4deg);
	-moz-transform: skewY(4deg);
	-o-transform: skewY(4deg);
    overflow:hidden;
    opacity:0.4;
    transition:all 0.5s;
    z-index:1;
    background-size:100% 100%;
    -webkit-backface-visibility: hidden;
}

#skewed div:hover {
    opacity:1;
    z-index:2;
    background-size:110% 110%;
}

#top {
    top:-50px;
    left:0;
    background:url(http://lorempixel.com/1000/400/animals) no-repeat center center;
}

#bottom {
    top:150px;
    left:0;
    background:url(http://lorempixel.com/1000/400/people) no-repeat center center;
}