Make an expanding circle that reveals behind content on scale

Question

So I have a question that's been nagging me. Can you make a circle, that when expands, "deletes" the parent, but only a part (that is the width and height of the circle) and makes the content behind that parent visible? Here's a sketch:

Can you do something like that? The closest I've gotten is mix-blend-mode: difference; but it only works with colours and not other various content such as text.

Answer 1

You can do such thing with radial-gradient within a pseudo element as a top layer then simply control background-size:

.box {
  width:200px;
  height:100px;
  background:blue;
  position:relative;
  color:#fff;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background-image:radial-gradient(circle at center, transparent 20%,blue 22%);
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  transition:1s;
}
.box:hover::before {
  background-size:500% 500%;
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate dignissim leo, sed varius urna lacinia et. Vivamus volutpat turpis tellus, sit amet lobortis quam finibus non. Nunc ac sodales lectus, et dictum enim. Praesent blandit pulvinar erat, eu facilisis tortor varius id. Vivamus a pulvinar ante. 
</div>

You can also consider box-shadow and make the pseudo-element to be a circle:

.box {
  width:200px;
  height:100px;
  background:blue;
  position:relative;
  color:#fff;
  overflow:hidden;
}
.box:before {
  content:"";
  position:absolute;
  width:40px;
  height:40px;
  border-radius:50%;
  box-shadow:0 0 0 2000px blue;
  top:calc(50% - 20px);
  left:calc(50% - 20px);
  transition:1s;
}
.box:hover::before {
  width:250px;
  height:250px;
  top:calc(50% - 125px);
  left:calc(50% - 125px);
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate dignissim leo, sed varius urna lacinia et. Vivamus volutpat turpis tellus, sit amet lobortis quam finibus non. Nunc ac sodales lectus, et dictum enim. Praesent blandit pulvinar erat, eu facilisis tortor varius id. Vivamus a pulvinar ante. 
</div>

Here is another way in case you need some transparency:

.box {
  margin-top:80px;
  margin-left:130px;
  width:40px;
  height:40px;
  border-radius:50%;
  color:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:1s all;
}
.box > span {
  flex-shrink:0;
  background:blue;
  width:200px;
  height:100px;
  overflow:hidden;
}
.box:hover {
  margin:0px;
  width:300px;
  height:200px;
}
body {
 margin:0;
 background:pink;
}

<div class="box">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate dignissim leo, sed varius urna lacinia et. Vivamus volutpat turpis tellus, sit amet lobortis quam finibus non. Nunc ac sodales lectus, et dictum enim. Praesent blandit pulvinar erat, eu facilisis tortor varius id. Vivamus a pulvinar ante. 
</span>
</div>

---

A more tricky way with only background and without extra element or pseudo element (work only with text)

.box {
  width:200px;
  height:100px;
  position:relative;
  background:
   radial-gradient(circle at center, #000 20%,transparent 22%);
  background-size:100% 100%;
  background-position:center;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition:1s;
}
.box:hover {
  background-size:500% 500%;
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate dignissim leo, sed varius urna lacinia et. Vivamus volutpat turpis tellus, sit amet lobortis quam finibus non. Nunc ac sodales lectus, et dictum enim. Praesent blandit pulvinar erat, eu facilisis tortor varius id. Vivamus a pulvinar ante. 
</div>

And let's don't forget the clip-path solution:

.box {
  width:200px;
  height:100px;
  position:relative;
  background:blue;
  color:#fff;
  transition:1s;
  -webkit-clip-path: circle(22% at 50% 50%);
clip-path: circle(22% at 50% 50%);
}
.box:hover {
  -webkit-clip-path: circle(80% at 50% 50%);
clip-path: circle(80% at 50% 50%);
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate dignissim leo, sed varius urna lacinia et. Vivamus volutpat turpis tellus, sit amet lobortis quam finibus non. Nunc ac sodales lectus, et dictum enim. Praesent blandit pulvinar erat, eu facilisis tortor varius id. Vivamus a pulvinar ante. 
</div>