Is it possible to use tailwind css to have a hover effect follow a mouse?

Question

I am currently learning react and tailwind and have started working on a site with only those frameworks. I have a welcome page with an image hidden on screen until hovering over with the mouse. Is it possible to have that opacity fade out on only a radius of the pointer and have that radius follow the pointer?

I have looked into the documentation and have found focus and pointer states but not sure how to implement the idea. I have a basic fade in/out with opacity and hover:opacity classes currently and will keep researching but any help will be greatly appreciated!

Answer 1

You can definitely add a mouse event listener that will provide pointer location. Based on that information you can adjust the opacity.

const [mousePos, setMousePos] = useState({});
useEffect(() => {
    const handleMouseMove = (event) => {
      setMousePos({ x: event.clientX, y: event.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);

    return () => {
      window.removeEventListener(
        'mousemove',
        handleMouseMove
      );
    };
  }, []);

Now, if you want the opacity based off of the object you are tracking (how close the pointer is to that object)

Find mouse position relative to element