body{
  background:#2ecc71;
  overflow:hidden;
}
.container{
  width:400px;
  height:400px;
  position:relative;
  margin:100px;
  -webkit-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
}

.circle{
  border:1px solid #fff;
  background-color:rgba(255,255,255,0.2);
  border-radius:50%;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  -webkit-transform:rotate(30deg) translateY(-50px);
  transform:rotate(30deg) translateY(-50px);
  -webkit-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
}
.container:hover{
  height:100px;
  -webkit-transform:translateY(130px);
}