Move checkbox label when box is checked - html

Question

I'm looking for some help to move my checkbox label after the label has been checked. When it starts out, the label is in the middle of the code. After I click on it, however, I would like for it to be moved. I thought that I had it, but it doesn't look that way now. Is there anybody that would be willing to lend a hand?
JSFiddle: http://jsfiddle.net/50c419nL/4/
Markup:
<div id="vera-gallery">
<div class="vera-check">
<label for="vone">e x i l e</label>
<input type="checkbox" id="vone" name="main" />
<div class="vera-bar">I'm controlled by toggle. No JavaScript!</div>
</div>
</div>
CSS:
#vera-gallery {
width: 500px;
height: 500px;
overflow: hidden;
background-image:url(http://i.imgur.com/ZOmzzeE.png);
margin: auto;
position: relative;
}
#vera-gallery input[type=checkbox] {
display: none;
}
.vera-check {
width: 500px;
height: 500px;
}
.vera-check input[type=checkbox] {
position: absolute;
top: 50%;
left: 50%;
}
.vera-check input[type=checkbox]:checked ~ .vera-bar {
margin-left: 0;
}
.vera-check label {
cursor: pointer;
}
.vera-check label[for=vone] {
top: 235px;
width: 80px;
text-align: center;
font-family: oxygen;
font-size: 8px;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
text-align: center;
padding: 10px;
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
left: 200px;
border: 1px solid #fff;
}
.vera-check input[type=checkbox]:checked ~ label[for=vone] {
top: 10px;
left: 10px;
}
.vera-bar {
width: 470px;
padding: 15px;
background-color: rgba(0, 0, 0, 0.8);
float: left;
top: 0px;
height: 100%;
font-family: oxygen;
font-weight: bold;
color: #fff;
margin-left: -500px;
transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
-ms-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
}
.vera-ships {
width: 225px;
padding: 15px;
background-color: rgba(0, 0, 0, 0.8);
float: left;
top: 0px;
height: 100%;
font-family: oxygen;
font-weight: bold;
color: #fff;
margin-left: -255px;
transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
-ms-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
}
.vera-two {
position: absolute;
}
.vera-two .vera-chk {
float: left
}
.vera-two input[type=checkbox] {
display: none
}

Answer 1

The general sibling selector will not work in this case, with the markup as-is, since the checkbox input does not precede the label.
The ~ combinator separates two selectors and matches the second
element only if it is preceded by the first, and both share a common
parent.
If, however, you move the label after the div, it works: http://jsfiddle.net/50c419nL/5/
<div id="vera-gallery">
<div class="vera-check">
<input type="checkbox" id="vone" name="main" />
<div class="vera-bar">I'm controlled by toggle. No JavaScript!</div>
<label for="vone">e x i l e</label><!-- moved to here -->
</div>
</div>