javascript - How hide part photo and animate -

i need make such effect (jsfiddle), 2 photos. occurred me use skewed div hide part of image , second image below. , know not how. please me.

i thank you.

code:

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: 0.5s;             transform: skewx(11deg);             width: 0;         }