SOURCE

const imgList = document.querySelectorAll('img')
imgList.forEach((imgDom,index) =>{
    imgDom.style.zIndex=imgList.length-index;
})

<div class="wrapper">
    <div class="left">
        <img src="https://i.gsxcdn.com/1216155133_pv3d776l.jpeg" />
    </div>
    <div class="right">
        <img src="https://i.gsxcdn.com/1216155134_4xmypu7u.jpeg" />
    </div>
    
</div>

.wrapper {
    position: relative;
    display: flex;
    width: 600px;
    height: 160px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}
.wrapper .left,
.wrapper .right {
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.wrapper .left {
   /* background: red; */
}

.wrapper .right {
    /* background: green; */
}
.wrapper .left img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 2;
}

.wrapper .right img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 2;
}