shanhaijing/css/end.css

@import url(music.css);
*{
    margin: 0;
    padding: 0;
}
#container{
    width: 390px;
    height: 844px;
    margin: 0px auto;
    background: url("../imags/background/back.png") no-repeat;
    background-size: 390px 844px;
    /* border: 1px solid rgb(240, 7, 7); */
    position: relative;
    border-radius: 30px;
}    
.container1{
    width: 200px;
    height: 200px;
    /* border: 1px salmon solid; */
}
.container1>div:first-child{
    position: absolute;
    left: 85px;
    top: 165px;
    z-index: 3;

}
.container1>div:first-child>img:hover{
    transform: translate(0px,-10px);
    /* box-shadow:0px 0px 5px 5px #f4f4f4; */

}
.container1>div:first-child>img{
    width: 120px;
    height: 130px;
}

.container1>div:last-child{
    position: absolute;
    left: 60px;
    top: 130px;
}
.container1>div:last-child>img{
    width: 30px;
    height: 65px;
}
.container1>div:last-child>img:hover{
    transform: translate(0px,-10px);
}

.container2{
    width: 200px;
    height: 200px;
    /* border: 1px salmon solid; */
    position: absolute;
    top: 250px;
    left: 20px;
}
.container2>div:first-child{
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 4;
    /* border: 1px salmon solid; */
}
.container2>div:first-child>img:hover{
    transform: translate(0px,-10px);
}
.container2>div:first-child>img{
    width: 120px;
    height: 160px;
    /* border: 1px salmon solid; */
}
.container2>div:last-child{
    position: absolute;
    left:-7px;
    top: -20px;
    z-index: 5;
    /* border: 1px salmon solid; */
}
.container2>div:last-child>img:hover{
    transform: translate(0px,-10px);
}
.container2>div:last-child>img{
    width: 30px;
    height: 65px;
    /* border: 1px salmon solid; */
}


.container3{
    width: 200px;
    height: 200px;
    /* border: 1px salmon solid; */
    position: absolute;
    top: 90px;
    right: 30px;
}
.container3>div:first-child{
    position: absolute;
    right: 20px;
    top: 0px;
    /* border: 1px salmon solid; */
}
.container3>div:first-child>img:hover{
    transform: translate(0px,-10px);
}
.container3>div:first-child>img{
    width: 160px;
    height: 180px;
    /* border: 1px salmon solid; */
}

.container3>div:last-child{
    position: absolute;
    right:5px;
    top:-10px;
    /* border: 1px salmon solid; */
}
.container3>div:last-child>img:hover{
    transform: translate(0px,-10px);
}
.container3>div:last-child>img{
    width: 30px;
    height: 65px;
    /* border: 1px salmon solid; */
}


.container4{
    width: 200px;
    height: 200px;
    /* border: 1px salmon solid; */
    position: absolute;
    top: 250px;
    right: 0px;
}
.container4>div:first-child{
    position: absolute;
    right: 10px;
    top: -10px;
    /* border: 1px salmon solid;*/
}
.container4>div:first-child>img:hover{
    transform: translate(0px,-10px);
}
.container4>div:first-child>img{
    width: 180px;
    height: 150px;
    /* border: 1px salmon solid; */
}

.container4>div:last-child{
    position: absolute;
    right:20px;
    top: -30px;
    /* border: 1px salmon solid; */
}
.container4>div:last-child>img:hover{
    transform: translate(0px,-10px);
}
.container4>div:last-child>img{
    width: 30px;
    height: 65px;
    /* border: 1px salmon solid; */
}


.container5{
    width: 200px;
    height: 200px;
    /* border: 1px salmon solid; */
    position: absolute;
    top:330px;
    left: 100px;
}
.container5>div:first-child{
    position: absolute;
    left: 0px;
    top: 0px;
    /* border: 1px salmon solid; */
    z-index: 6;
}
.container5>div:first-child>img:hover{
    transform: translate(0px,-10px);
}
.container5>div:first-child>img{
    width: 170px;
    height: 160px;
    /* border: 1px salmon solid; */
}

.container5>div:last-child{
    position: absolute;
    left:145px;
    bottom: 60px;
    /* border: 1px salmon solid; */
    z-index: 10;
}
.container5>div:last-child>img:hover{
    transform: translate(0px,-10px);
}
.container5>div:last-child>img{
    width: 30px;
    height: 65px;
    /* border: 1px salmon solid; */
}

.container6{
    width: 200px;
    height: 200px;
    /* border: 1px salmon solid; */
    position: absolute;
    bottom: 215px;;
    left: 5px;
}
.container6>div:first-child{
    position: absolute;
    left: 0px;
    bottom: 0px;
    /* border: 1px salmon solid; */
    z-index: 10;
}
.container6>div:first-child>img:hover{
    transform: translate(0px,-10px);
}
.container6>div:first-child>img{
    width: 170px;
    height: 200px;
    /* border: 1px salmon solid; */
}

.container6>div:last-child{
    position: absolute;
    left:5px;
    bottom: 70px;
    /* border: 1px salmon solid; */
    z-index: 13;
}
.container6>div:last-child>img:hover{
    transform: translate(0px,-10px);
}
.container6>div:last-child>img{
    width: 30px;
    height: 65px;
    /* border: 1px salmon solid; */
}


.container7{
    width: 200px;
    height: 200px;
    /* border: 1px salmon solid; */
    position: absolute;
    bottom: 210px;;
    right: 20px;
}
.container7>div:first-child{
    position: absolute;
    right: 0px;
    bottom: 10px;
    /* border: 1px salmon solid; */
    z-index: 12;
}
.container7>div:first-child>img:hover{
    transform: translate(0px,-10px);
}
.container7>div:first-child>img{
    width: 180px;
    height: 150px;
    /* border: 1px salmon solid; */
}

.container7>div:last-child{
    position: absolute;
    right:25px;
    bottom: 115px;
    /* border: 1px salmon solid; */
    z-index: 15;
}
.container7>div:last-child>img:hover{
    transform: translate(0px,-10px);
}
.container7>div:last-child>img{
    width: 30px;
    height: 65px;
    /* border: 1px salmon solid; */
}
.container8{
    width: 200px;
    height: 200px;
    /* border: 1px salmon solid; */
    position: absolute;
    bottom:-35px;;
    right: 155px;
}
.container8>div:first-child>a>img:hover{
    transform: translate(0px,-10px);
}
/* .container8>div:first-child>a>img{

     border: 1px salmon solid; 
} */
.container9{
    position: absolute;
    top:150px;
    left:10px;
    z-index: 20;
    padding-top: 80px;
    padding-bottom: 50px; 
    display: none;
}
.container9>img{
    width: 370px;
    height: 300px;

}
#container:hover>div:last-child{
    display: block;
}