<div class="circle"></div>
<div class="wrapper text-center">
<h1>HELLO WORLD!!</h1>
</div>body{
background: #000;
font-family: arial;
}
.circle{
width: 60px;
height: 60px;
background: #fff;
position: absolute;
border-radius: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: difference;
}
.wrapper{
background: url("https://i.imgur.com/6U6YJsn.jpg") center center;
width: 500px;
height: 500px;
backgorund-size: cover;
margin: 0 auto;
padding: 20px;
}
img{
width: 100%;
}$(window).mousemove(function (e) {
$(".circle").css({ top: e.pageY, left: e.pageX });
}); 
External CSS
This Pen doesn't use any external CSS resources.