<div class="img-container">

<div class="img-left"></div>

<div class="img-right"></div>

</div>

<style>

.img-container{

position: relative;

width: 200px;

height: 100px;

border:solid 4px red;

}

.img-left{

background: url(http://demo.imatlas.com/img/left.jpg);

background-size: cover;

width: 100%;

height: 100%;

}

.img-right{

position: absolute;

left: 0;

top: 0;

background: url(http://demo.imatlas.com/img/right.jpg);

background-size: cover;

-webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%);

width: 100%;

height: 100%;

}</style>