*{
    margin:0;
    padding:0;
}
body{
    background-color:#f5f5f5;
}
.wrapper{
    width:800px;
    height:800px;
    margin:0 auto;
    position:relative;
}
.start{
    position:absolute;
    height:40px;
    width:80px;
    line-height:40px;
    font-size:18px;
    text-align:center;
    cursor:pointer;
    border:1px solid black;
    background-color:#fff8dc;
    font-weight:300;
    margin-left:50%;
    left:-40px;
    margin-top:20px;
}
.right{
    width:500px;
    height:500px;
    position:absolute;
    right:0;
    top:0;
    left:0;
    bottom:0;
    margin:auto;
}
.right .imgArea{
    height:500px;
    width:500px;
    position:relative;
}
.right .imgCell{
    float:left;
    width:73px;
    height:73px;
    border:1px solid #fff;
    border-radius:4px;
    position:absolute;
    z-index:10;
    box-shadow: 0 0 8px #fff;
    transition-property: background-position;
    transition-duration: 300ms;
    transition-timing-function:ease-in-out;
}
.right .hover{
    opacity:0.8;
    box-shadow: 0 0 8px #000;
    z-index:20;
    border:1px solid #09f;
}