Radion button as image does not uncheck upon clicking other radio button - html

Question

I want to simply uncheck radio button upon clicking the other one in the list. (that's how radio is supposed to work ?)
Here's my code:
<div class="row">
<div class="col-sm-2">
<label>Payment methods:</label>
<input type="radio" name="pp" id="pp" checked>
<label for="pp">
<img src="../img/pp-icon.png">
<div>Paypal</div>
</label>
</div>
<div class="col-sm-2">
<label style="visibility: hidden;">Payment methods:</label>
<input type="radio" name="skrill" id="skrill">
<label for="skrill">
<img src="../img/skrill-icon.png">
<div>Skrill</div>
</label>
</div>
</div>
CSS:
input[type=radio]{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
input[type=radio] + label>img{ /* IMAGE STYLES */
border-radius: 50%;
border: 1px solid #fff;
padding: 20px;
width: 100px;
cursor: pointer;
transition: 0.2s linear;
}
input[type=radio]:checked + label>img{ /* (RADIO CHECKED) IMAGE STYLES */
background-color: rgba(255, 255, 255, 0.8);
}
PROBLEM DEMO: https://jsfiddle.net/gsda8s6r/ (radio buttons not hidden)
Live photo:
Thanks for your help!

Answer 1

The radio buttons must have same name, you can place the image inside the label tag
here is update fiddle https://jsfiddle.net/gsda8s6r/1/
<div class="col-sm-2">
<label>
<input type="radio" name="payment" id="pp" checked>
<img style="max-height: 100px; width: auto;" src="http://www.aganis.it/siti-web-trento-blog/wp-content/uploads/2015/09/img-logo-paypal.png">
<div>Paypal</div>
</label>
</div>
<div class="col-sm-2">
<label>
<input type="radio" name="payment" id="skrill">
<img style="max-height: 100px; width: auto;" src="https://content.skrill.com/fileadmin/content/images/business/global_coverage_icon.png">
<div>Skrill</div>
</label>
</div>

Answer 2

Check this fiddle: JSFiddle
I have changed some of your CSS, but I think you'll get the trick.
As others told, name of the radio button should be same. And you need to hide your default radio buttons with the following CSS.
input[type=radio].custom {
display: none;
}
Add "custom" class to your radio input tag.
That's it. This is a trick! ;-)