JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body{
background-image: url("http://gameabout.com/uploads/mabinogi/bbs/2013/2013022111531166b74.png");
background-color:white;
background-size:600px 550px;
background-repeat:no-repeat;
background-attachment:fixed;
/*background:url("https://upload.wikimedia.org/wikipedia/en/thumb/e/eb/Mabinogi.svg/800px-Mabinogi.svg.png") top right no-repeat; background-attachment:fixed;*/
background-position: 700px 250px;
/*http://cdn.namuwikiusercontent.com/59/593ad63ea1cd5a9cebfa622a4570b74ff55506aa12771560ac38730c00f5a714.png?e=1486625363&k=j2nE-NxJjLJg0BquHLhKbw*/
}
#wtControl{
width:630px;
background-color:white;
//margin-left:20px;
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/e/eb/Mabinogi.svg/800px-Mabinogi.svg.png");
background-size: 90px 50px;
background-repeat:no-repeat;
background-position: 525px 30px;
background-color:white;
background-attachment:relative;
}
</style>
<body onclick="baseCalc();k();instrumentcheck();" onload ="memory();nullcheck();hider();baseCalc();show0();instrumentcheck();">
<div class = "container-fluid" style ="margin-top:20px;display:block;" >
<div class ="container-fluid" style ="position:absolute;margin-left:630px;" >
<div id="htControl" class="container" style ="background-color:transparent;">
<div class ="btn-group-vertical" >
<label id="aboutThisButton" style ="margin-bottom:35px;"><button type ="button" class="btn btn active" style ="font-size:20px;width:130px;text-shadow:1px 2px white;font-family:Times New Roman, Times, serif;">About </button></label>
<label id="settingButton" style ="margin-bottom:35px;" ><button type ="button"class="btn...
CSS
#hover{
background-color:transparent;
}
#hover0:hover{
background-color:yellow;
}
#wtControl2{
width:630px;
background-color:white;
}
#htControl{
background-color:white;
height:500px;
width: 200px;
position:fixed;
}
#aboutThis{
display:none;
}
#setting{
display:block;
}
.smallView{
font-size:11px;
}
#setEnchant{
display:none;
}
.yesInstrument{
}
#viva{
display:none;
}
#harvest{
display:none;
}
#oob{
display:none;
}
#march{
display:none;
}
/*=====================================*/
#setting input[type="checkbox"]+label{
text-align:left;
opacity:0.15;
border: 1px solid transparent;
}
#setting input[type="radio"]+label{
text-align:left;
opacity:0.15;
border: 1px solid transparent;
}
#setting input[type="radio"]{
border: 1px solid transparent;
display:none;
}
#setting input[type="checkbox"]{
border: 1px solid transparent;
opacity:0.4;
}
#setting input[type="radio"]:checked {
opacity:1;
}
#setting input[type="checkbox"]:checked {
opacity:1;
}
#setting input[type="checkbox"]:checked+label {
opacity:1;
}
#setting input[type="radio"]:checked +label {
opacity:1;
}
#setting input[type="number"]:hover{
background-color:#f2f2f2;
}
#setting input+label:hover{
opacity:0.6;
}
/*=====================================*/
.container {
display: inline-block;
}
.grow0{
opacity:0.7;
}
.grow0:hover{
opacity:1;
background-color:yellow;
}