<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.