<main>
<!--  water effect container  -->
  <div class="waterEffect">
    
  </div>
  <h1>water effect</h1>
</main>

*{
  transition:.7s;
  margin:0px;
  padding:0px;
  box-sizing:border-box;
}
body{
  background:#252525;
}
main{
  width:100%;
  height:auto;
}

/* water effect container */
.waterEffect{
  opacity:.8;
  position:relative;
  margin:100px auto;
  height:400px;
  width:400px;
  background-image:url('https://images.unsplash.com/photo-1497316730643-415fac54a2af?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80') ;
  background-size:cover;
  background-position:center;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0px 0px 35px -5px rgba(50, 88, 130, 0.32);
}
/* using after to make water like effect  */
.waterEffect::after{
  content:'';
  position:absolute;
  opacity:.6;
  bottom:0px;
  right:-30%;
  height:600px;
  width:600px;
  background:skyblue;
  border-radius:30%;
  animation:effect 7s ease-in-out alternate infinite;
}

/* main part  */

/* animation for the effect */

@keyframes effect{
  to{
    transform:translateY(-100%) rotate(360deg);
  }
}



 h1{
   position: relative;
   color:white;
   text-transform:capitalize;
   font-family:sans-serif;
   text-align:center;
}
// nothing here 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.