圆圈叠加层会在内容下方倍增

Question

如何将鼠标悬停在圆圈上以使副本倍增？实现背景混合模式：乘法；只影响圈子中的内容。

目标是红色圆圈乘以下面的内容

JsFiddle

jQuery(document).ready(function() {

  var mouseX = 0, mouseY = 0;
  var xp = 0, yp = 0;
   
  $(document).mousemove(function(e){
    mouseX = e.pageX - 30;
    mouseY = e.pageY - 30; 
  });
    
  setInterval(function(){
    xp += ((mouseX - xp)/6);
    yp += ((mouseY - yp)/6);
    $("#circle").css({left: xp +'px', top: yp +'px'});
  }, 20);

});

body{
	position: relative;
	height: 100%; 
	width : 100%;  
	margin: 0;
  background-color: red;
}

h1{
	padding: 50px;
	text-align: center;
	z-index: 10;
	background-color: none;
	font-family: Helvetica;
	font-size: 100px;
}

.circle {
/*	z-index: -10;*/
	position: absolute;
	background-blend-mode: multiply; 
	background-color: red;
	width: 200px; 
	height: 200px; 
  border-radius: 50%;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> WORDS HERE </h1> 
<span id="circle" class="circle"></span>