Play Codes

/* Slide Image Toggle */

.divvs {
background: #000;
width: 2em;
height: 2em;

float: left;
margin: 0 1em;
}

#pg1, #pg2, #pg3, #pg4 {
/* display: none; */
}

label {
display: inline-block;
}

#pg1:checked ~ #loc1 {
/* Checked means if they've been clicked on or selected. */
transform: translate(20em, 0em);
opacity: 1;
}

#pg2:checked ~ #loc2 {
transform: translate(20em, 0em);
opacity: 1;
}

#pg3:checked ~ #loc3 {
transform: translate(20em, 0em);
opacity: 1;
}

#pg4:checked ~ #loc4 {
transform: translate(20em, 0em);
opacity: 1;
}

.divcont {
width: 10em;
height: 10em;

position: absolute;

-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}

</style>

<!-- Buttons are always placed right after style tag. They don't work otherwise. Don't know why yet. -->

<input type="radio" name="col" id="pg1">
<input type="radio" name="col" id="pg2">
<input type="radio" name="col" id="pg3">
<input type="radio" name="col" id="pg4">

<!-- Labels can be clicked instead of radio buttons since they share IDs. With this, you can hide the radio buttons in  CSS with a simple "display: none;" -->

<label for="pg1">
<div class="divvs">
</div>
</label>

<label for="pg2">
<div class="divvs">
</div>
</label>

<label for="pg3">
<div class="divvs">
</div>
</label>

<label for="pg4">
<div class="divvs">
</div>
</label>

<div id="loc1" class="divcont up1" style="background-color: red;">one div</div>
<div id="loc2" class="divcont up1" style="background-color: green;">two div</div>
<div id="loc3" class="divcont up1" style="background-color: purple;">three div</div>
<div id="loc4" class="divcont up1" style="background-color: pink;">four div</div>

<!-- Labels can be placed within divs -->