JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
            <img src="https://s31.postimg.org/l6m2amhm3/img.jpg">
            <div class="man">
                <div class="color"></div>
            </div>
        </div>

CSS

#container {
                height: 400px;
                width: 700px;
                position: relative;
            }

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

            .man {
                margin-left: 50%;
                width: 50%;
            }

            .man:hover > div {
                margin-left: -10%;
                width: 25%;
            }

            .color {
                background-color: rgb(181, 230, 247);
                margin-left: 20%;
                transition: all 0.5s;
                transform: skewX(11deg);
                width: 0;
            }