Uncheck radio on click
HTML
<div class="row">
<div class="col-sm-4 ">
<h1>TEST1</h1>
<img style=" width: 80%; margin-top: -0.5em;" src="https://www.w3schools.com/css/img_fjords.jpg" height="5%" >
<input class="hidden" name="vehicle" id="check1" type="radio" checked/>
<label class="round" for="check1">LABEL</label>
</div>
<div class="col-sm-4 ">
<h1>TEST2</h1>
<img style=" width: 80%; margin-top: -0.5em;" src="https://www.w3schools.com/css/img_fjords.jpg" height="5%" >
<input class="hidden" name="vehicle" id="check2" type="radio" />
<label class="round" for="check2">LABEL</label>
</div>
<div class="col-sm-4 ">
<h1>TEST3</h1>
<img style=" width: 80%; margin-top:-0.5em;" src="https://www.w3schools.com/css/img_fjords.jpg" height="5%" >
<input class="hidden" name="vehicle" id="check3" type="radio" />
<div style="width:100%:">
<label class="round" for="check3"></label>
</div>
</div>
</div>
CSS
label.round {
display: block;
cursor: pointer;
text-indent: -999em;
height: 30px;
width: 30px;
border-radius: 30px;
border: 5px solid #ee382c;
box-shadow: 0 0 0 0px #fff inset;
}
input[type="radio"]:checked + label {
background: rgba(0, 0, 0, 0.49);
}
.hidden {
display: none;
}