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