JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div>
    <img src="http://lorempixel.com/output/people-q-c-640-480-9.jpg" alt="" />
    <div class="round">
        <img src="http://lorempixel.com/output/people-q-c-640-480-7.jpg" alt="" />
    </div>
</div>

CSS

body, html {
    margin:0;
    padding:0;
}
div{
    position:relative;
    overflow:hidden;
}
img {
    width:100%;
    display:block;
    margin:0 auto;
}
.round {
    position:absolute;
    width:200%;
    left:-50%; top:50%;
    border-top-left-radius:100%;
    border-top-right-radius:100%;
    border-top:20px solid #fff;
    border-right:20px solid #fff;
    border-left:20px solid #fff;
}
.round img {
    width:60%;
}