
okay so I want each numbered circle to have a radio option, I'd also like the radio spheres to be semi-transperent, and be the color of the colomn they're on, finally I'd like them to be as large as the spheres they're ontop of HTML: <div class="navigable-section-navigable-section--ship-power ship-power">
<div class="speed"><!-->Speed<-->
<input type="radio" id="6" name="attr_ship_speed" value="6"><br>
<input type="radio" id="5" name="attr_ship_speed" value="5"><br>
<input type="radio" id="4" name="attr_ship_speed" value="4"><br>
<input type="radio" id="3" name="attr_ship_speed" value="3"><br>
<input type="radio" id="2" name="attr_ship_speed" value="2"><br>
<input type="radio" id="1" name="attr_ship_speed" value="1"><br>
<input type="radio" id="0" name="attr_ship_speed" value="0">
</div>
<div class="OOC"><!-->O.O.C.<-->
<input type="radio" id="4" name="attr_ship_ooc" value="4"><br>
<input type="radio" id="3" name="attr_ship_ooc" value="3"><br>
<input type="radio" id="2" name="attr_ship_ooc" value="2"><br>
<input type="radio" id="1" name="attr_ship_ooc" value="1"><br>
<input type="radio" id="0" name="attr_ship_ooc" value="0">
</div>
<div class="helm"><!-->Helm<-->
<input type="radio" id="6" name="attr_ship_helm" value="6"><br>
<input type="radio" id="5" name="attr_ship_helm" value="5"><br>
<input type="radio" id="4" name="attr_ship_helm" value="4"><br>
<input type="radio" id="3" name="attr_ship_helm" value="3"><br>
<input type="radio" id="2" name="attr_ship_helm" value="2"><br>
<input type="radio" id="1" name="attr_ship_helm" value="1"><br>
<input type="radio" id="0" name="attr_ship_helm" value="0">
</div>
<div class="guns"><!-->Guns<-->
<input type="radio" id="6" name="attr_ship_guns" value="6"><br>
<input type="radio" id="5" name="attr_ship_guns" value="5"><br>
<input type="radio" id="4" name="attr_ship_guns" value="4"><br>
<input type="radio" id="3" name="attr_ship_guns" value="3"><br>
<input type="radio" id="2" name="attr_ship_guns" value="2"><br>
<input type="radio" id="1" name="attr_ship_guns" value="1"><br>
<input type="radio" id="0" name="attr_ship_guns" value="0">
</div>
<div class="shields"><!-->Shields<-->
<input type="radio" id="6" name="attr_ship_shields" value="6"><br>
<input type="radio" id="5" name="attr_ship_shields" value="5"><br>
<input type="radio" id="4" name="attr_ship_shields" value="4"><br>
<input type="radio" id="3" name="attr_ship_shields" value="3"><br>
<input type="radio" id="2" name="attr_ship_shields" value="2"><br>
<input type="radio" id="1" name="attr_ship_shields" value="1"><br>
<input type="radio" id="0" name="attr_ship_shields" value="0">
</div>
</div> CSS code: div.ship-power {
background-image: url("<a href="https://i.imgur.com/vAF0Rt6.png" rel="nofollow">https://i.imgur.com/vAF0Rt6.png</a>");
height: 700px;
width: 700px;
background-repeat: no-repeat;
background-size: cover;
display: grid;
grid-template-columns: repeat(5, 40px);
}
div.speed,
div.helm,
div.guns,
div.shields {
position: relative;
top: 150px;
}
div.speed {
position: relative;
left: 103px;
}
div.OOC {
position: relative;
top: 290px;
left: 168px
}
div.helm {
position: relative;
left: 278px
}
div.guns {
position: relative;
left: 343px
}
div.shields {
position: relative;
left: 408px
}
[ edit ]