如何隐藏部分照片和动画

Question

我需要制作这样的效果（jsfiddle），但需要两张照片。 在我看来，使用倾斜的div会隐藏部分图像而第二个图像位于下方。 我不知道怎么做。 请帮帮我。

我感谢你。

代码：

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;
        }