console
let pos=document.documentElement
pos.addEventListener('mousemove',e=>{
pos.style.setProperty('--x',e.clientX+'px')
pos.style.setProperty('--y',e.clientY+'px')
})
<div id="clip-content">
<div class="banner"></div>
<div class="content">
<h2>CSS Clip-path Effects</h2>
<p>
Please send this message to those people who mean something to you,to those who have touched your life in one way or another,to those who make you smile when you really need it,to those that make you see the brighter side of things when you are really down,to those who you want to let them know that you appreciate their friendship.And if you don’t, don’t worry,nothing bad will happen to you,you will just miss out on the opportunity to brighten someone’s day with this message.Please send this message to those people who mean something to you,to those who have touched your life in one way or another.
</p>
</div>
</div>
#clip-content {
display: flex;
align-items:center;
justify-content: center;
min-height: 100vh;
background: #fff;
}
.banner {
position: fixed;
width: 100%;
height: 100vh;
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597034148013&di=8a342584aef0de3ad2d602457ce025a8&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fda376fe77f3f8eb55de45e79f2d91a37ce4f90e2286a1-uzKAxN_fw658);
background-size:cover;
display: flex;
align-items: center;
justify-content: center;
transition: .2s;
clip-path: circle(75px at var(--x) var(--y));
}
.banner:active {
clip-path: circle(400px at var(--x) var(--y));
}
.content {
position: relative;
max-width: 1100px;
z-index: 1;
mix-blend-mode:overly;
pointer-events: none;
user-select: none
}
.content h2 {
position: relative;
color: #fff;
font-size: 60px;
}
.content p {
position: relative;
color: #fff;
font-size: 18px;
}