@charset "utf-8";

.container{   margin:100px auto; position: relative; }
.container img{
  width: 140px;
  padding: 5px;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.9);
  position: absolute;
  z-index: 1;
  background: #fff;
min-height: 100px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
}
  .container p{      position: absolute;
    z-index: 1;
    border-radius: 8px;
    text-align: center;
    width: 280px;
    left: 50%;
    margin-left: -140px;
    font-size: 23px;
    top: -27px;
    color: #fff;
    letter-spacing: 2px;
  
   /* older safari/Chrome browsers */  
   -webkit-opacity: 0.5;  
   /* Netscape and Older than Firefox 0.9 */  
   -moz-opacity: 0.5;  
   /* Safari 1.x (pre WebKit!) ÀÏʽkhtmlÄں˵ÄSafariä¯ÀÀÆ÷*/  
   -khtml-opacity: 0.5;  
   /* IE9 + etc¡­modern browsers */  
   opacity: .5;  
   /* IE 4-9 */  
   filter:alpha(opacity=50);  
   /*This works in IE 8 & 9 too*/  
   -ms-filter:¡±progid:DXImageTransform.Microsoft.Alpha(Opacity=50)¡±;  
   /*IE4-IE9*/  
   filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  
  }
  .container img:nth-child(1){
    left: 191px;
    top: -18px;
  }
  .container img:nth-child(2){
    left: 390px;
    top: 460px;
    z-index: 20;
  }
  .container img:nth-child(3){
    left: 15px;
    top: 10px;
    z-index: 1;
  }
  .container img:nth-child(4){
    left: 860px;
    top: -20px;
  }
  .container img:nth-child(5){
    left: 930px;
    top: 485px;
    z-index: 1;
  }
  .container img:nth-child(6){
    left: 712px;
    top: 380px;
    z-index: 6;
  }
  .container img:nth-child(7){
    left: 960px;
    top: 225px;
  }
  .container img:nth-child(8){
    left: 130px;
    top: 485px;
    z-index: 14;
  }
  .container img:nth-child(9){
    left: 70px;
    top: 181px;
  }
  .container img:nth-child(10){
    left: 835px;
    top: 315px;
  }
  
  .container img:nth-child(11){
    left: 210px;
    top: 340px;
    z-index: 13;
    }
    .container img:nth-child(12){
      left: 720px;
      top: 125px;
    }
    .container img:nth-child(13){
      left: 0px;
      top: 415px;
      z-index: 21;
    }
    .container img:nth-child(14){
    left: 300px;
    top: 210px;
    z-index: 12;
    }
    .container img:nth-child(15){
      left: 577px;
      top: 210px;
    }
    .container img:nth-child(16){
      left: 615px;
      top: 510px;
      z-index: 20;
    }
  
  .container img:nth-child(17){
    top: -20px;
    left: 535px;
  }
  
  .container img:nth-child(18){
    left: 490px;
    top: 325px;
  } 
  .container img:nth-child(19){
    left: 400px;
    top: 80px;
    z-index: 1;
  } 
 
.container img:hover{ 
  -webkit-transform:rotate(0deg) scale(2);
  -ms-transform:rotate(0deg) scale(2);
  transform:rotate(0deg) scale(2);
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
  z-index: 38;  
}


.container img:nth-child(16):hover{ 
  -webkit-transform:translateY(-120px) scale(2);
  -ms-transform:translateY(-120px) scale(2);
  transform:translateY(-120px)  scale(2);
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
  z-index: 38;    
}


.container img:nth-child(8):hover{ 
  -webkit-transform:translateX(70px)  scale(2);
  -ms-transform:translateX(70px) scale(2);
  transform:translateX(70px)  scale(2);
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
  z-index: 38;   
}



.container img:nth-child(13):hover{ 
  -webkit-transform:translateX(50px) translateY(-50px)  scale(2);
  -ms-transform:translateX(50px) translateY(-50px) scale(2);
  transform:translateX(50px) translateY(-50px)  scale(2);
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
  z-index: 38;   
}
 
.container img:nth-child(2):hover{ 
  -webkit-transform: translateY(-90px)  scale(2);
  -ms-transform: translateY(-590px) scale(2);
  transform: translateY(-90px)  scale(2);
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
  z-index: 38;   
}

.container img:nth-child(3):hover{ 
  -webkit-transform:translateY(150px) translateX(80px) scale(2);
  -ms-transform:translateY(150px) translateX(80px) scale(2);
  transform:translateY(150px) translateX(80px) scale(2);
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
  z-index: 38;   
}

.container img:nth-child(4):hover{ 
  -webkit-transform:translateY(140px) translateX(-80px) scale(2);
  -ms-transform:translateY(140px) translateX(-80px) scale(2);
  transform:translateY(140px) translateX(-80px) scale(2);
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
  z-index: 38;   
}

.container img:nth-child(5):hover{ 
  -webkit-transform:translateY(-130px) translateX(-80px) scale(2);
  -ms-transform:translateY(-130px) translateX(-80px) scale(2);
  transform:translateY(-130px) translateX(-80px) scale(2);
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
  z-index: 38;   
}

.container img:nth-child(7):hover{ 
  -webkit-transform:translateX(-80px) scale(2);
  -ms-transform:translateX(-80px) scale(2);
  transform:translateX(-80px) scale(2);
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
  z-index: 38;   
}

.container img:nth-child(1):hover,
.container img:nth-child(17):hover{ 
  -webkit-transform:translateY(90px)  scale(2);
  -ms-transform:translateY(90px) scale(2);
  transform:translateY(90px)  scale(2);
  -webkit-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in;
  z-index: 38;   
}