Switch between images selecting radios - html

Question

Explanation
I want to switch between images selecting radios, but I'd like it to be HTML/CSS only. As you can see in the code below, it does work, but in my main code the radio button and the image are within their own divs, which then this code won't work because ~ only acts if .radio-image is directly preceded by input.radio3:checked; also in my main code, the images comes before the radio button.
I also wrote an example like it'd in my main code.
Codes
working code
input.radio1:checked~.image1 {
display: block;
}
input.radio1:checked~.image2 {
display: none;
}
input.radio1:checked~.image3 {
display: none;
}
input.radio2:checked~.image2 {
display: block;
}
input.radio2:checked~.image1 {
display: none;
}
input.radio2:checked~.image3 {
display: none;
}
input.radio3:checked~.image3 {
display: block;
}
input.radio3:checked~.image1 {
display: none;
}
input.radio3:checked~.image2 {
display: none;
}
<input type="radio" name="test" class="radio1" checked/>
<input type="radio" name="test" class="radio2" />
<input type="radio" name="test" class="radio3" />
<div class="image1">
<img src="http://placehold.it/50x50">
</div>
<div class="image2">
<img src="http://placehold.it/75x75">
</div>
<div class="image3">
<img src="http://placehold.it/100x100">
</div>
main code example
input.radio1:checked~.image1 {
display: block;
}
input.radio1:checked~.image2 {
display: none;
}
input.radio1:checked~.image3 {
display: none;
}
input.radio2:checked~.image2 {
display: block;
}
input.radio2:checked~.image1 {
display: none;
}
input.radio2:checked~.image3 {
display: none;
}
input.radio3:checked~.image3 {
display: block;
}
input.radio3:checked~.image1 {
display: none;
}
input.radio3:checked~.image2 {
display: none;
}
<section class="testSection">
<div class="firstDiv">
<div class="image1">
<img src="http://placehold.it/50x50">
</div>
<div class="image2">
<img src="http://placehold.it/75x75">
</div>
<div class="image3">
<img src="http://placehold.it/100x100">
</div>
</div>
<div class="secondDiv">
<form class="testForm">
<div class="thirdDiv">
<div class="inputDiv">
<input type="radio" name="test" class="radio1" checked />
</div>
<div class="inputDiv">
<input type="radio" name="test" class="radio2" />
</div>
<div class="inputDiv">
<input type="radio" name="test" class="radio3" />
</div>
</div>
</form>
</div>
</section>
Thanks in advance,
Luiz.