@charset "utf-8";

#container {border:1px solid #aaa; height:400px; width:500px; margin:0 auto; 
    padding:10px; position:relative;}

    #main {background-color: red; width:100px; height:100px; position:absolute; top:160px;
         left:210px;border-radius:50px; transition: all 2s ease-in-out 0s;}
        
         #ball1, #ball2, #ball3, #ball4, #ball5, #ball6, #ball7, #ball8 {background-color: blue; height: 20px; width:20px; 
        border-radius: 10px;position:absolute; top:200px; left: 250px; transition: all 2s ease-in-out;}

        #ball1 {transition-delay: 0.1s;}
        #ball2 {transition-delay: 0.2s;}
        #ball3 {transition-delay: 0.3s;}
        #ball4 {transition-delay: 0.4s;}
        #ball5 {transition-delay: 0.5s;}
        #ball6 {transition-delay: 0.6s;}
        #ball7 {transition-delay: 0.7s;}
        #ball8 {transition-delay: 0.8s;}

        #container:hover #main {opacity:0;}
        
        #container:hover #ball1{transform:translate(-250px, 200px);}

        #container:hover #ball2{transform:translate(0px, -200px);}

        #container:hover #ball3{transform:translate(250px, -200px);}

        #container:hover #ball4{transform:translate(250px,0px);}

        #container:hover #ball5{transform:translate(250px,200px);}

        #container:hover #ball6{transform:translate(0px,200px);}

        #container:hover #ball7{transform:translate(-250px,-200px);}

        #container:hover #ball8{transform:translate(-250px,0px);}