JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay">
	<img src="http://placekitten.com/g/300/300" />
</div>

CSS

.overlay {
	position: relative;
	overflow: hidden;
	width: 300px;
	height: 300px;
}
.overlay::after {
	content: "";
	position: absolute;
    width: 100%;
    height: 50%;
    top: 30px;
    border-radius: 50%;
    box-shadow: 0px -100px 0px 72px red;
 }
.overlay>img { display: block; }