JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
            <img src="https://pixabay.com/static/uploads/photo/2016/05/18/21/00/cat-1401564_960_720.jpg">
            <div class="right">
                <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/How%20to%20calm%20a%20hyper%20dog.jpg?itok=Vg7ueySi">
            </div>
            <div class="corner">
                <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/How%20to%20calm%20a%20hyper%20dog.jpg?itok=Vg7ueySi">
            </div>
        </div>

CSS

.container {
                height: 400px;
                overflow: hidden;
                position: relative;
                width: 600px;
            }

            .container img, .container div {
                height: 100%;
                position: absolute;
            }

            .container img {
                width: 600px;
            }

            .right, .right img {
                transition: all 0.5s;
            }

            .right {
                overflow: hidden;
                transform: skewX(11deg);
                width: 40%;
                margin-left: 60%;
                z-index: 3;
            }

            .right img {
                margin-left: -300px;
                transform: skewX(-11deg);
            }

            .right:hover {
                margin-left: 40%;
                width: 60%;
            }

            .right:hover img {
                margin-left: -180px;
            }

            .corner {
                width: 10%;
                margin-left: 90%;
                overflow: hidden;
                z-index: 2;
            }

            .corner img {
                margin-left: -800%;
            }