JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<input type="radio" id="Radio_1" value="0" name="Radio">
<input type="radio" id="Radio_2" value="1" name="Radio">
<div class="img"></div>
<div class="img"></div>

CSS

.img:first-of-type {
	height: 100px;
	width: 100px;
	background: url(https://dummyimage.com/100x100/5f86cf/000000.png) center no-repeat;
	background-size: cover;
}
.img:last-of-type {
	height: 100px;
	width: 100px;
	background: url(https://dummyimage.com/100x100/cf5f63/000000.png) center no-repeat;
	background-size: cover;
}
#Radio_1:checked ~ .img:first-of-type,
#Radio_2:checked ~ .img:last-of-type {
	-webkit-box-shadow: inset 0 0 100vw rgba(0, 0, 0, .8);
	        box-shadow: inset 0 0 100vw rgba(0, 0, 0, .8);
}