How would I go about making elements underneath a div visible?-CodePudding

I have been trying to make a "hidden text" website of sorts.

I have managed to code a circular div that follows my mouse cursor and inverts every text underneath it using background-filter in CSS and Javascript:

let circle = document.getElementById('circle');

const onm ouseMove = (e) => {
    circle.style.left = e.pageX   'px';
    circle.style.top = e.pageY   'px';
}
  
document.addEventListener('mousemove', onm ouseMove);

The CSS for the #circle element is:

#circle {
    position: absolute;
    transform: translate(-50%,-50%);
    height: 80px;
    width: 80px;
    border-radius: 50%;
    box-shadow: 0px 0px 40px 10px white;
    pointer-events: none;
    backdrop-filter: invert(100%); 
    z-index: 100;
}

I have tried setting the text opacity to 5% and then setting backdrop-filter: opacity(100%) but that didn't work, unfortunately. How should I go about achieving this? I am open to any and all libraries and willing to follow any tutorial. Accessibility is not an issue at the moment as this is just an experiment for myself.

CodePudding user response：

I managed to make the effect you want using the CSS clip-path property:

const content = document.getElementById("content");

const onm ouseMove = (e) => {
  content.style.clipPath =
    `circle(40px at ${e.pageX}px ${e.pageY}px)`;
}

document.addEventListener('mousemove', onm ouseMove);

<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis arcu diam, mattis vel mi sit amet, consequat dapibus sapien. Integer blandit et justo sit amet pharetra. Quisque facilisis placerat aliquet. Proin at dictum sapien. Proin ac urna quis leo
    vehicula semper. Pellentesque condimentum scelerisque aliquam. Nunc vitae pellentesque tortor.</p>
</div>


<div id="circle"></div>

CodePudding user response：

One way to achieve the effect you want is to use the mix-blend-mode property in CSS. This property allows you to blend an element's content with the content of the element behind it. To invert the text underneath the circle, you can set the mix-blend-mode of the circle to difference, which inverts the colors of the elements underneath it.

Here's an example of how you might use the mix-blend-mode property:

#circle {
  position:absolute;
  transform:translate(-50%,-50%);
  height:80px;
  width:80px;
  border-radius:50%;
  box-shadow: 0px 0px 40px 10px white;
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 100;
}

Note that the mix-blend-mode property is not supported by all browsers, so you may want to include a fallback for browsers that do not support it. For more information on the mix-blend-mode property and how to use it, you can check out the MDN documentation:

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Hope this helps!