.wcontainer {
margin-left:auto;
margin-right:auto;
width: 300px;
}
.wglass {
background: rgba( 255, 255, 255, 0.50);
width: 300px;
height: 400px;
position: relative;
  border-radius: 100%;
}
.wwater {
background-image: url("https://priteshgupta.com/demos/fill/waves.png");
background-position: top right;
position: absolute;
bottom: 0px;
width: 300px;
height: 10em;
  border-radius: 100%;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
transition: all 3s ease-out;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}
.wglass:hover .wwater {
height: 30em;
background-position: top left;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
transition: all 3s ease-out;
}

.circle{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:150px;
  height:150px;
  background:rgba(18, 43, 66,1);
  border:1px solid rgba(40, 123, 178,.5);
  /* box-shadow:0 0 0 5px #4973ff; */
  border-radius:50%;
  overflow:hidden;
}
.circlex{
  position:relative;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  height:400px;
  background:rgba(18, 43, 66,1);
  overflow:hidden;
}
.wave{
  position:relative;
  width:100%;
  height:100%;
  /* background:transparent; */
  border-radius:50%;
  box-shadow:inset 0 0 50px rgba(18, 43, 66,.9);
}
.wave:before,.wave:after{
  content:'';
  position:absolute;
  width:200%;
  height:200%;
  top:0;
  left:50%;
  transform:translate(-50%,-75%);
  background:#000;
}
.wave:before{
  border-radius:45%;
  /* background:rgba(40, 123, 178,1); */
  animation:animate 5s linear infinite;
}
.wave:after{
  border-radius:40%;
  background:rgba(40, 123, 178,.5);
  animation:animate 10s linear infinite;
}
@keyframes animate{
  0%{
     transform:translate(-50%,-75%) rotate(0deg);
  }
  100%{
     transform:translate(-50%,-75%) rotate(360deg);
  }
}