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: 300%;
	height: 300%;
	top: -25%;
	left: -100%;
	background: radial-gradient(ellipse at center, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
}
.overlay>img { display: block; }