<input type="checkbox" id="cheat">
<input type="radio" id="cage" name="image" checked>
<input type="radio" id="cageAnim" name="image">
<input type="radio" id="cageKitten" name="image">
<label class="selectBG" for="cage">Kitten</label>
<label class="selectBG" for="cageAnim">Cage</label>
<label class="selectBG" for="cageKitten">Cage Kitten</label>
<input type="radio" id="a-up" name="a-vertical">
<input type="radio" id="a-middle" name="a-vertical" checked>
<input type="radio" id="a-down" name="a-vertical">
<input type="radio" id="a-left" name="a-horazontal" checked>
<input type="radio" id="a-center" name="a-horazontal">
<input type="radio" id="a-right" name="a-horazontal">
<input type="radio" id="b-up" name="b-vertical" checked>
<input type="radio" id="b-middle" name="b-vertical">
<input type="radio" id="b-down" name="b-vertical">
<input type="radio" id="b-left" name="b-horazontal" checked>
<input type="radio" id="b-center" name="b-horazontal">
<input type="radio" id="b-right" name="b-horazontal">
<input type="radio" id="c-up" name="c-vertical">
<input type="radio" id="c-middle" name="c-vertical" checked>
<input type="radio" id="c-down" name="c-vertical">
<input type="radio" id="c-left" name="c-horazontal">
<input type="radio" id="c-center" name="c-horazontal">
<input type="radio" id="c-right" name="c-horazontal" checked>
<input type="radio" id="d-up" name="d-vertical" checked>
<input type="radio" id="d-middle" name="d-vertical">
<input type="radio" id="d-down" name="d-vertical">
<input type="radio" id="d-left" name="d-horazontal">
<input type="radio" id="d-center" name="d-horazontal" checked>
<input type="radio" id="d-right" name="d-horazontal">
<input type="radio" id="e-up" name="e-vertical">
<input type="radio" id="e-middle" name="e-vertical">
<input type="radio" id="e-down" name="e-vertical" checked>
<input type="radio" id="e-left" name="e-horazontal">
<input type="radio" id="e-center" name="e-horazontal" checked>
<input type="radio" id="e-right" name="e-horazontal">
<input type="radio" id="f-up" name="f-vertical">
<input type="radio" id="f-middle" name="f-vertical" checked>
<input type="radio" id="f-down" name="f-vertical">
<input type="radio" id="f-left" name="f-horazontal">
<input type="radio" id="f-center" name="f-horazontal" checked>
<input type="radio" id="f-right" name="f-horazontal">
<input type="radio" id="g-up" name="g-vertical" checked>
<input type="radio" id="g-middle" name="g-vertical">
<input type="radio" id="g-down" name="g-vertical">
<input type="radio" id="g-left" name="g-horazontal">
<input type="radio" id="g-center" name="g-horazontal">
<input type="radio" id="g-right" name="g-horazontal" checked>
<input type="radio" id="h-up" name="h-vertical">
<input type="radio" id="h-middle" name="h-vertical">
<input type="radio" id="h-down" name="h-vertical" checked>
<input type="radio" id="h-left" name="h-horazontal" checked>
<input type="radio" id="h-center" name="h-horazontal">
<input type="radio" id="h-right" name="h-horazontal">
<div class="board">
<div class="peice-a">
<label for="a-up"></label>
<label for="a-middle"></label>
<label for="a-down"></label>
<label for="a-left"></label>
<label for="a-center"></label>
<label for="a-right"></label>
</div>
<div class="peice-b">
<label for="b-up"></label>
<label for="b-middle"></label>
<label for="b-down"></label>
<label for="b-left"></label>
<label for="b-center"></label>
<label for="b-right"></label>
</div>
<div class="peice-c">
<label for="c-up"></label>
<label for="c-middle"></label>
<label for="c-down"></label>
<label for="c-left"></label>
<label for="c-center"></label>
<label for="c-right"></label>
</div>
<div class="peice-d">
<label for="d-up"></label>
<label for="d-middle"></label>
<label for="d-down"></label>
<label for="d-left"></label>
<label for="d-center"></label>
<label for="d-right"></label>
</div>
<div class="peice-e">
<label for="e-up"></label>
<label for="e-middle"></label>
<label for="e-down"></label>
<label for="e-left"></label>
<label for="e-center"></label>
<label for="e-right"></label>
</div>
<div class="peice-f">
<label for="f-up"></label>
<label for="f-middle"></label>
<label for="f-down"></label>
<label for="f-left"></label>
<label for="f-center"></label>
<label for="f-right"></label>
</div>
<div class="peice-g">
<label for="g-up"></label>
<label for="g-middle"></label>
<label for="g-down"></label>
<label for="g-left"></label>
<label for="g-center"></label>
<label for="g-right"></label>
</div>
<div class="peice-h">
<label for="h-up"></label>
<label for="h-middle"></label>
<label for="h-down"></label>
<label for="h-left"></label>
<label for="h-center"></label>
<label for="h-right"></label>
</div>
<div class="peice-a img"></div>
<div class="peice-b img"></div>
<div class="peice-c img"></div>
<div class="peice-d img"></div>
<div class="peice-e img"></div>
<div class="peice-f img"></div>
<div class="peice-g img"></div>
<div class="peice-h img"></div>
</div>
<div class="winner">WINNER!</div>input[type="radio"]{
display:none;
}
#cheat{
position:absolute;
bottom:0;
right:0;
}
#cheat:checked ~ input[type="radio"]{
display:block;
}
#cheat:checked ~ input[type="radio"]::after{
content:attr(id);
color:#fff;
display:block;
padding-left:1em;
width:30em;
}
#a-up,#a-left,#b-up,#b-center,#c-up,#c-right,#d-middle,#d-left,#e-middle,#e-center,
#f-middle,#f-right,#g-down,#g-left,#h-down,#h-center{
outline:2px solid red;
}
body{
margin:0;
background:#222;
text-align:center;
}
.board{
font-size:1vmin;
outline:2em solid #333;
width:60em;
height:60em;
position:absolute;
left:calc(50% - 30em);
top:calc(50% - 30em);
overflow:hidden;
}
[class^=peice]{
--x:20em;
position:absolute;
width:20em;
height:20em;
transform:translate(var(--x),var(--y));
transition:transform .5s;
}
[class^=peice].img{
background-size:60em 60em;
border-radius:2em;
box-shadow:inset 0 0 0em .2em #eee,
inset 1em 1em 1em #eee5,
inset -1em -1em 1em #0005;
box-sizing:box-border;
}
.peice-a.img{
background-position:top left;
}
.peice-b.img{
background-position:top center;
}
.peice-c.img{
background-position:top right;
}
.peice-d.img{
background-position:center left;
}
.peice-e.img{
background-position:center center;
}
.peice-f.img{
background-position:center right;
}
.peice-g.img{
background-position:bottom left;
}
.peice-h.img{
background-position:bottom center;
}
[class^=peice] label{
display:block;
width: 13em;
height: 13em;
position:absolute;
transform:rotate(45deg);
background:#444;
}
[class^=peice] label:hover{
background:#666;
outline:.5em solid #111;
}
[class^=peice] label[for$="up"]{
top: -6em;
left:3.5em;
}
[class^=peice] label[for$="middle"]{
display:none;
z-index:5;
left:3.5em;
}
[class^=peice] label[for$="down"]{
bottom: -6em;
left:3.5em;
}
[class^=peice] label[for$="left"]{
left: -6em;
top:3.5em;
}
[class^=peice] label[for$="center"]{
display:none;
z-index:5;
top:3.5em;
}
[class^=peice] label[for$="right"]{
right: -6em;
top:3.5em;
}
#a-up:checked ~* [for="a-middle"],
#b-up:checked ~* [for="b-middle"],
#c-up:checked ~* [for="c-middle"],
#d-up:checked ~* [for="d-middle"],
#e-up:checked ~* [for="e-middle"],
#f-up:checked ~* [for="f-middle"],
#g-up:checked ~* [for="g-middle"],
#h-up:checked ~* [for="h-middle"]{
display:block;
transform:translate(0,13em) rotate(45deg);
}
#a-down:checked ~* [for="a-middle"],
#b-down:checked ~* [for="b-middle"],
#c-down:checked ~* [for="c-middle"],
#d-down:checked ~* [for="d-middle"],
#e-down:checked ~* [for="e-middle"],
#f-down:checked ~* [for="f-middle"],
#g-down:checked ~* [for="g-middle"],
#h-down:checked ~* [for="h-middle"]{
display:block;
transform:translate(0,-6em) rotate(45deg);
}
#a-left:checked ~* [for="a-center"],
#b-left:checked ~* [for="b-center"],
#c-left:checked ~* [for="c-center"],
#d-left:checked ~* [for="d-center"],
#e-left:checked ~* [for="e-center"],
#f-left:checked ~* [for="f-center"],
#g-left:checked ~* [for="g-center"],
#h-left:checked ~* [for="h-center"]{
display:block;
transform:translate(13em,0) rotate(45deg);
}
#a-right:checked ~* [for="a-center"],
#b-right:checked ~* [for="b-center"],
#c-right:checked ~* [for="c-center"],
#d-right:checked ~* [for="d-center"],
#e-right:checked ~* [for="e-center"],
#f-right:checked ~* [for="f-center"],
#g-right:checked ~* [for="g-center"],
#h-right:checked ~* [for="h-center"]{
display:block;
transform:translate(-6em,0) rotate(45deg);
}
#a-up:checked ~ * .peice-a,
#b-up:checked ~ * .peice-b,
#c-up:checked ~ * .peice-c,
#d-up:checked ~ * .peice-d,
#e-up:checked ~ * .peice-e,
#f-up:checked ~ * .peice-f,
#g-up:checked ~ * .peice-g,
#h-up:checked ~ * .peice-h{
--y:0;
}
#a-middle:checked ~ * .peice-a,
#b-middle:checked ~ * .peice-b,
#c-middle:checked ~ * .peice-c,
#d-middle:checked ~ * .peice-d,
#e-middle:checked ~ * .peice-e,
#f-middle:checked ~ * .peice-f,
#g-middle:checked ~ * .peice-g,
#h-middle:checked ~ * .peice-h{
--y:20em;
}
#a-down:checked ~ * .peice-a,
#b-down:checked ~ * .peice-b,
#c-down:checked ~ * .peice-c,
#d-down:checked ~ * .peice-d,
#e-down:checked ~ * .peice-e,
#f-down:checked ~ * .peice-f,
#g-down:checked ~ * .peice-g,
#h-down:checked ~ * .peice-h{
--y:40em;
}
#a-left:checked ~ * .peice-a,
#b-left:checked ~ * .peice-b,
#c-left:checked ~ * .peice-c,
#d-left:checked ~ * .peice-d,
#e-left:checked ~ * .peice-e,
#f-left:checked ~ * .peice-f,
#g-left:checked ~ * .peice-g,
#h-left:checked ~ * .peice-h{
--x:0;
}
#a-center:checked ~ * .peice-a,
#b-center:checked ~ * .peice-b,
#c-center:checked ~ * .peice-c,
#d-center:checked ~ * .peice-d,
#e-center:checked ~ * .peice-e,
#f-center:checked ~ * .peice-f,
#g-center:checked ~ * .peice-g,
#h-center:checked ~ * .peice-h{
--x:20em;
}
#a-right:checked ~ * .peice-a,
#b-right:checked ~ * .peice-b,
#c-right:checked ~ * .peice-c,
#d-right:checked ~ * .peice-d,
#e-right:checked ~ * .peice-e,
#f-right:checked ~ * .peice-f,
#g-right:checked ~ * .peice-g,
#h-right:checked ~ * .peice-h{
--x:40em;
}
.winner{
font-family:arial;
color: #fff;
text-align: center;
font-size: 4vw;
z-index: 100;
width:100%;
height:2em;
position:absolute;
top:calc(50% - 1em);
line-height: 2em;
background: red;
transform:scale(0);
}
#a-up:checked ~ #a-left:checked ~ #b-up:checked ~ #b-center:checked ~ #c-up:checked ~ #c-right:checked ~ #d-middle:checked ~ #d-left:checked ~ #e-middle:checked ~ #e-center:checked ~ #f-middle:checked ~ #f-right:checked ~ #g-down:checked ~ #g-left:checked ~ #h-down:checked ~ #h-center:checked ~ .winner{
animation:winner 3s 1 1s;
}
@keyframes winner{
0%,100%{transform:scale(0);}
10%,90%{transform:scale(1);}
}
.selectBG{
display:inline-block;
font-family:arial;
font-size:2vmin;
width:8em;
text-align:center;
padding:1em 0;
background:#000;
color:#fff;
border:.25em solid #333;
margin:2em .25em;
}
#cage:checked ~ *[for="cage"],
#cageAnim:checked ~ *[for="cageAnim"],
#cageKitten:checked ~ *[for="cageKitten"]{
border-bottom-color:teal;
}
#cage:checked ~ * [class^=peice].img{
background-image:url(https://placekitten.com/1000/1000);
}
#cageAnim:checked ~ * [class^=peice].img{
background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/cagedance.gif);
}
#cageKitten:checked ~ * [class^=peice].img{
background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/51773/kittencage.jpg);
}// JS is for web, I build email.
// Follow on twitter for more CSS and email hacks @M_J_Robbins
// font-size:1vmin; messes with applemail's poor little brain and slows everything down so put a fixed size in here for email - 8px works well.
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.