console
<div class="wrap">
<div id="row-1-col-1" class="pointer"></div>
<div id="row-1-col-2" class="pointer"></div>
<div id="row-1-col-3" class="pointer"></div>
<div id="row-1-col-4" class="pointer"></div>
<div id="row-1-col-5" class="pointer"></div>
<div id="row-1-col-6" class="pointer"></div>
<div id="row-1-col-7" class="pointer"></div>
<div id="row-1-col-8" class="pointer"></div>
<div id="row-1-col-9" class="pointer"></div>
<div id="row-1-col-10" class="pointer"></div>
<div id="row-2-col-1" class="pointer"></div>
<div id="row-2-col-2" class="pointer"></div>
<div id="row-2-col-3" class="pointer"></div>
<div id="row-2-col-4" class="pointer"></div>
<div id="row-2-col-5" class="pointer"></div>
<div id="row-2-col-6" class="pointer"></div>
<div id="row-2-col-7" class="pointer"></div>
<div id="row-2-col-8" class="pointer"></div>
<div id="row-2-col-9" class="pointer"></div>
<div id="row-2-col-10" class="pointer"></div>
<div id="row-3-col-1" class="pointer"></div>
<div id="row-3-col-2" class="pointer"></div>
<div id="row-3-col-3" class="pointer"></div>
<div id="row-3-col-4" class="pointer"></div>
<div id="row-3-col-5" class="pointer"></div>
<div id="row-3-col-6" class="pointer"></div>
<div id="row-3-col-7" class="pointer"></div>
<div id="row-3-col-8" class="pointer"></div>
<div id="row-3-col-9" class="pointer"></div>
<div id="row-3-col-10" class="pointer"></div>
<div id="row-4-col-1" class="pointer"></div>
<div id="row-4-col-2" class="pointer"></div>
<div id="row-4-col-3" class="pointer"></div>
<div id="row-4-col-4" class="pointer"></div>
<div id="row-4-col-5" class="pointer"></div>
<div id="row-4-col-6" class="pointer"></div>
<div id="row-4-col-7" class="pointer"></div>
<div id="row-4-col-8" class="pointer"></div>
<div id="row-4-col-9" class="pointer"></div>
<div id="row-4-col-10" class="pointer"></div>
<div id="row-5-col-1" class="pointer"></div>
<div id="row-5-col-2" class="pointer"></div>
<div id="row-5-col-3" class="pointer"></div>
<div id="row-5-col-4" class="pointer"></div>
<div id="row-5-col-5" class="pointer"></div>
<div id="row-5-col-6" class="pointer"></div>
<div id="row-5-col-7" class="pointer"></div>
<div id="row-5-col-8" class="pointer"></div>
<div id="row-5-col-9" class="pointer"></div>
<div id="row-5-col-10" class="pointer"></div>
<div id="row-6-col-1" class="pointer"></div>
<div id="row-6-col-2" class="pointer"></div>
<div id="row-6-col-3" class="pointer"></div>
<div id="row-6-col-4" class="pointer"></div>
<div id="row-6-col-5" class="pointer"></div>
<div id="row-6-col-6" class="pointer"></div>
<div id="row-6-col-7" class="pointer"></div>
<div id="row-6-col-8" class="pointer"></div>
<div id="row-6-col-9" class="pointer"></div>
<div id="row-6-col-10" class="pointer"></div>
<div id="row-7-col-1" class="pointer"></div>
<div id="row-7-col-2" class="pointer"></div>
<div id="row-7-col-3" class="pointer"></div>
<div id="row-7-col-4" class="pointer"></div>
<div id="row-7-col-5" class="pointer"></div>
<div id="row-7-col-6" class="pointer"></div>
<div id="row-7-col-7" class="pointer"></div>
<div id="row-7-col-8" class="pointer"></div>
<div id="row-7-col-9" class="pointer"></div>
<div id="row-7-col-10" class="pointer"></div>
<div id="row-8-col-1" class="pointer"></div>
<div id="row-8-col-2" class="pointer"></div>
<div id="row-8-col-3" class="pointer"></div>
<div id="row-8-col-4" class="pointer"></div>
<div id="row-8-col-5" class="pointer"></div>
<div id="row-8-col-6" class="pointer"></div>
<div id="row-8-col-7" class="pointer"></div>
<div id="row-8-col-8" class="pointer"></div>
<div id="row-8-col-9" class="pointer"></div>
<div id="row-8-col-10" class="pointer"></div>
<div id="row-9-col-1" class="pointer"></div>
<div id="row-9-col-2" class="pointer"></div>
<div id="row-9-col-3" class="pointer"></div>
<div id="row-9-col-4" class="pointer"></div>
<div id="row-9-col-5" class="pointer"></div>
<div id="row-9-col-6" class="pointer"></div>
<div id="row-9-col-7" class="pointer"></div>
<div id="row-9-col-8" class="pointer"></div>
<div id="row-9-col-9" class="pointer"></div>
<div id="row-9-col-10" class="pointer"></div>
<div id="row-10-col-1" class="pointer"></div>
<div id="row-10-col-2" class="pointer"></div>
<div id="row-10-col-3" class="pointer"></div>
<div id="row-10-col-4" class="pointer"></div>
<div id="row-10-col-5" class="pointer"></div>
<div id="row-10-col-6" class="pointer"></div>
<div id="row-10-col-7" class="pointer"></div>
<div id="row-10-col-8" class="pointer"></div>
<div id="row-10-col-9" class="pointer"></div>
<div id="row-10-col-10" class="pointer"></div>
<div class="ball"></div>
</div>
html {
positon:relative;
height: 100%;
width:100%;
background-color:#666;
}
html:before {
content:'';
height:100%;
vertical-align:middle;
width:50%;
display:inline-block;
}
body {
display:inline-block;
position:relative;
font-size:12px;
line-height:20px;
width:75vmin;
height:75vmin;
background-color:#003;
padding:0;
margin:0 0 0 -37.5vmin;
vertical-align:middle;
box-shadow: 1px 1px 3px #ddd, -2px -2px 5px #333;
border-radius:.66vmin;
}
.pointer {
position:absolute;
height:10%;
width:10%;
}
.ball {
position:absolute;
background-color:rgb(150,150,255);
width:10%;
height:10%;
border-radius:50%;
top:45%;
left:45%;
-webkit-transition:left .66s ease-out, top .66s ease-out;
transition:left 1s ease-out, top 1s ease-out;
box-shadow: -1px -1px 3px #fff, 2px 2px 5px #000;
}
[id^="row-1"],
[id^="row-1"]:hover ~ .ball {
left: 0;
}
[id^="row-2"],
[id^="row-2"]:hover ~ .ball {
left: 10%;
}
[id^="row-3"],
[id^="row-3"]:hover ~ .ball {
left: 20%;
}
[id^="row-4"],
[id^="row-4"]:hover ~ .ball {
left: 30%;
}
[id^="row-5"],
[id^="row-5"]:hover ~ .ball {
left: 40%;
}
[id^="row-6"],
[id^="row-6"]:hover ~ .ball {
left: 50%;
}
[id^="row-7"],
[id^="row-7"]:hover ~ .ball {
left: 60%;
}
[id^="row-8"],
[id^="row-8"]:hover ~ .ball {
left: 70%;
}
[id^="row-9"],
[id^="row-9"]:hover ~ .ball {
left: 80%;
}
[id^="row-10"],
[id^="row-10"]:hover ~ .ball {
left: 90%;
}
[id$="col-1"],
[id$="col-1"]:hover ~ .ball {
top: 0;
}
[id$="col-2"],
[id$="col-2"]:hover ~ .ball {
top: 10%;
}
[id$="col-3"],
[id$="col-3"]:hover ~ .ball {
top: 20%;
}
[id$="col-4"],
[id$="col-4"]:hover ~ .ball {
top: 30%;
}
[id$="col-5"],
[id$="col-5"]:hover ~ .ball {
top: 40%;
}
[id$="col-6"],
[id$="col-6"]:hover ~ .ball {
top: 50%;
}
[id$="col-7"],
[id$="col-7"]:hover ~ .ball {
top: 60%;
}
[id$="col-8"],
[id$="col-8"]:hover ~ .ball {
top: 70%;
}
[id$="col-9"],
[id$="col-9"]:hover ~ .ball {
top: 80%;
}
[id$="col-10"],
[id$="col-10"]:hover ~ .ball {
top: 90%;
}