#1 end.css

margin: 0;
padding: 0;

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;

width: 200px;
height: 200px;
/* border: 1px salmon solid; */

position: absolute;
left: 85px;
top: 165px;
z-index: 3;

transform: translate(0px,-10px);
/* box-shadow:0px 0px 5px 5px #f4f4f4; */

width: 120px;
height: 130px;

position: absolute;
left: 60px;
top: 130px;

width: 30px;
height: 65px;

transform: translate(0px,-10px);

width: 200px;
height: 200px;
/* border: 1px salmon solid; */
position: absolute;
top: 250px;
left: 20px;

position: absolute;
left: 0px;
top: 0px;
z-index: 4;
/* border: 1px salmon solid; */

transform: translate(0px,-10px);

width: 120px;
height: 160px;
/* border: 1px salmon solid; */

position: absolute;
left:-7px;
top: -20px;
z-index: 5;
/* border: 1px salmon solid; */

transform: translate(0px,-10px);

width: 30px;
height: 65px;
/* border: 1px salmon solid; */

width: 200px;
height: 200px;
/* border: 1px salmon solid; */
position: absolute;
top: 90px;
right: 30px;

position: absolute;
right: 20px;
top: 0px;
/* border: 1px salmon solid; */

transform: translate(0px,-10px);

width: 160px;
height: 180px;
/* border: 1px salmon solid; */

position: absolute;
right:5px;
top:-10px;
/* border: 1px salmon solid; */

transform: translate(0px,-10px);

width: 30px;
height: 65px;
/* border: 1px salmon solid; */

width: 200px;
height: 200px;
/* border: 1px salmon solid; */
position: absolute;
top: 250px;
right: 0px;

position: absolute;
right: 10px;
top: -10px;
/* border: 1px salmon solid;*/

transform: translate(0px,-10px);

width: 180px;
height: 150px;
/* border: 1px salmon solid; */

position: absolute;
right:20px;
top: -30px;
/* border: 1px salmon solid; */

transform: translate(0px,-10px);

width: 30px;
height: 65px;
/* border: 1px salmon solid; */

width: 200px;
height: 200px;
/* border: 1px salmon solid; */
position: absolute;
top:330px;
left: 100px;

position: absolute;
left: 0px;
top: 0px;
/* border: 1px salmon solid; */
z-index: 6;

transform: translate(0px,-10px);

width: 170px;
height: 160px;
/* border: 1px salmon solid; */

position: absolute;
left:145px;
bottom: 60px;
/* border: 1px salmon solid; */
z-index: 10;

transform: translate(0px,-10px);

width: 30px;
height: 65px;
/* border: 1px salmon solid; */

width: 200px;
height: 200px;
/* border: 1px salmon solid; */
position: absolute;
bottom: 215px;;
left: 5px;

position: absolute;
left: 0px;
bottom: 0px;
/* border: 1px salmon solid; */
z-index: 10;

transform: translate(0px,-10px);

width: 170px;
height: 200px;
/* border: 1px salmon solid; */

position: absolute;
left:5px;
bottom: 70px;
/* border: 1px salmon solid; */
z-index: 13;

transform: translate(0px,-10px);

width: 30px;
height: 65px;
/* border: 1px salmon solid; */

width: 200px;
height: 200px;
/* border: 1px salmon solid; */
position: absolute;
bottom: 210px;;
right: 20px;

position: absolute;
right: 0px;
bottom: 10px;
/* border: 1px salmon solid; */
z-index: 12;

transform: translate(0px,-10px);

width: 180px;
height: 150px;
/* border: 1px salmon solid; */

position: absolute;
right:25px;
bottom: 115px;
/* border: 1px salmon solid; */
z-index: 15;

transform: translate(0px,-10px);

width: 30px;
height: 65px;
/* border: 1px salmon solid; */

width: 200px;
height: 200px;
/* border: 1px salmon solid; */
position: absolute;
bottom:-35px;;
right: 155px;

transform: translate(0px,-10px);

 border: 1px salmon solid; 

position: absolute;
top:150px;
left:10px;
z-index: 20;
padding-top: 80px;
padding-bottom: 50px; 
display: none;

width: 370px;
height: 300px;

display: block;

@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; }