<div id="container">
<div id="glass">
<div id="water"></div>
</div>
</div>#container {
margin-left:auto;
margin-right:auto;
width: 300px;
}
#glass {
background: rgba( 255, 255, 255, 0.50);
width: 300px;
height: 400px;
position: relative;
border-radius: 100%;
}
#water {
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;
}
#glass:hover #water {
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;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.