okay got opacity and position, if I can I'd like to make it so the tabs are only shown while hovering or active, though still transparent, and otherwise invisible (the tabs are in div.tabs), and making it so only a few floors show .navigable-section:not(.active){
display: none !important;
}
.nav-button.active{
background-color: blue;
}
div.tabs {
position: relative;
z-index: 1;
opacity: 60%;
}
div.controls {
display: grid;
grid-template-columns: 700px;
}
div.ship-power,
div.ship-floor-1,
div.ship-floor-2,
div.ship-floor-3,
div.ship-floor-4,
div.ship-floor-5 {
border: 1pt solid white;
height: 700px;
width: 700px;
margin-top: -25px;
}
div.ship-power {
background-image: url("<a href="https://i.imgur.com/vAF0Rt6.png" rel="nofollow">https://i.imgur.com/vAF0Rt6.png</a>");
background-repeat: no-repeat;
background-size: 700px 700px;
display: grid;
grid-template-columns: repeat(5, 40px);
}
div.ship-power div {
margin-top: -20px;
margin-left: -15px;
}
input[type="radio"] {
appearance: none;
border: none;
}
input[type="radio"] {
width: 100px;
height: 100px;
border-radius: 50%
}
div.ship-power input[type=radio] {
height: 60px;
width: 60px;
margin-bottom: -8px;
}
div.speed,
div.helm,
div.guns,
div.shields {
position: relative;
top: 130px;
}
div.speed {
position: relative;
left: 102px;
}
div.speed input[type="radio"]:checked {
background-color: lightgrey;
opacity: 60%;
}
div.OOC {
position: relative;
top: 271px;
left: 167px
}
div.OOC input[type="radio"]:checked {
background-color: blue;
opacity: 40%;
}
div.helm {
position: relative;
left: 277px
}
div.helm input[type="radio"]:checked {
background-color: yellow;
opacity: 50%;
}
div.guns {
position: relative;
left: 342px
}
div.guns input[type="radio"]:checked {
background-color: red;
opacity: 50%;
}
div.shields {
position: relative;
left: 407px
}
div.shields input[type="radio"]:checked {
background-color: green;
opacity: 60%;
}
div.ship-floor-1,
div.ship-floor-2,
div.ship-floor-3,
div.ship-floor-4,
div.ship-floor-5 {
background-image: url("<a href="https://i.imgur.com/ez6Aliz.png" rel="nofollow">https://i.imgur.com/ez6Aliz.png</a>");
height: 700px;
width: 700px;
background-repeat: no-repeat;
background-size: cover;
display: grid;
grid-template-columns: 29px repeat(7, 96px);
grid-template-rows: 29px repeat(7, 96px);
border-collapse: collapse;
}
div.ship-floor-1 span,
div.ship-floor-2 span,
div.ship-floor-3 span,
div.ship-floor-4 span,
div.ship-floor-5 span {
border: 1px solid black;
}
