JSFiddle - React, Tailwind, and code Playground

HTML

<div id="welcome-gender"> 
			<input style="background: url(http://socialavatarnetworkscript.com/media/img/male_avatar.png);margin-right: 240px;" class="gender" name="gender" type="radio" value="male">
			<input style="background: url(http://socialavatarnetworkscript.com/media/img/female_avatar.png)" class="gender" name="gender" type="radio" value="female">
		</div>

CSS

input[type="radio"].gender::after{
	background: rgba(0, 0, 0, 0.01);
	position: absolute;
	width: 170px;
	height: 300px;
	display: block;
	content: '';
	color: white;
	font-size: 1px;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
input[type="radio"].gender:checked::after{
	background: rgba(0, 0, 0, 0.8);
	position: absolute;
	width: 170px;
	height: 300px;
	display: block;
	content: 'SELECTED';
	border-radius: 4px;
	color: white;
	font-family: titillium, sans-serif;
	font-weight: 500;
	font-size: 22px;
	text-align: center;
	line-height: 300px;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
input[type="radio"]{
	display: inline-block;
	-webkit-appearance: none;
	-moz-appearance: 	none;
	-ms-appearance: 	none;
	appearance: 		none;
	border-radius: 4px 	!important;
	outline: none 		!important;
	border: none 		!important;
}
input[type="radio"].gender{
	height: 300px;
	width: 170px;
	border-radius: 4px !important;
	outline: none !important;
	border: none !important;
}