blob mask

by Saksham Malhotra

HTML

<div class="container">
  <div class="blobMask"></div>
</div>
<div>

CSS

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #d1d8e0;
  border-radius:10px;
}

.blobMask {
  position: absolute;
  height: 0;
  width: 100%;
  bottom: 0;
  background-color: #a55eea;
  border-radius: 40% 100% 10px 10px/ 60% 100% 10px 10px;
  transition: height 0.3s linear, border-radius 0.5s linear;
  overflow: hidden;
}

.container:hover .blobMask {
  height: 100%;
  border-radius: 10px;
}