Cursor hover zone effect using CSS

tl;dr: a friend asked me to help a simple hover effect for her portfolio, so I came up with a solution using modern CSS and a bit of Javascript. Here's a codepen

The problem

My friend asked me to help her to make her portfolio website interactive. She wanted to have a hover effect on the images that would replace the cursor with a string of text that would move in place of the cursor. The website being made with Cargo, it needed to be a simple solution that she could maintain with minimal coding knowledge (and without using any libraries!).

Let's get into it!

The solution

First, let's write our HTML: we'll have a list items with an image inside each one, and an element that will act as our dynamic cursor replacement.

<ul>
  <li id="one">
    <img
      src="https://images.unsplash.com/photo-1527556897832-0c6492fa56cd?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    />
  </li>
  <li id="two">
    <img
      src="https://images.unsplash.com/photo-1432251407527-504a6b4174a2?q=80&w=2448&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    />
  </li>
  <li id="three">
    <img
      src="https://images.unsplash.com/photo-1503756234508-e32369269deb?q=80&w=2232&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    />
  </li>
  <li id="four">
    <img
      src="https://images.unsplash.com/photo-1508313157893-34fe6176c189?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    />
  </li>
  <li id="five">
    <img
      src="https://images.unsplash.com/photo-1443397646383-16272048780e?q=80&w=3264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    />
  </li>
  <li id="six">
    <img
      src="https://images.unsplash.com/photo-1417052800325-788e0eaf22c6?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    />
  </li>
</ul>

<div class="cursor-overlay">
  <div class="cursor">
    <span data-target="one">one</span>
    <span data-target="two">two</span>
    <span data-target="three">three</span>
    <span data-target="four">four</span>
    <span data-target="five">five</span>
    <span data-target="six">six</span>
  </div>
</div>

I've added

#id

s to each item as well as a

data-target

attribute to each corresponding span in the cursor element, to create a relationship between the two.

Now let's get the JS out of the way: the sole reason we have some JS is because we need to get the cursor's position and pass it to CSS (using CSS variables). I think the code is self-explanatory:

document.addEventListener(
  'DOMLoaded',
  (function () {
    function updateCursorPosition(event) {
      document.documentElement.style.setProperty('--pagex', `${event.pageX}px`);
      document.documentElement.style.setProperty('--pagey', `${event.pageY}px`);
    }
    document.addEventListener('mousemove', updateCursorPosition);
  })()
);

Now for the CSS. I have some simple demo styles in the codepen demo, I'll skip those and go straight to the meaty stuff, with comments:

/* The cursor overlay sits over the entire page, and is passively updated with the two CSS variables we update in JS. */
.cursor-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cursor {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate3d(var(--pagex), var(--pagey), 0);
  transition: 0.1s ease-out;
  mix-blend-mode: exclusion;
}

/* Demo styles */
.cursor [data-target] {
  position: absolute;
  font-family: sans-serif;
  font-size: 50px;
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 0;
  transition: 0.2s ease-out;
}

/*
  Hide the cursor while hovering the grid.
  This prevents the cursor from "flashing" while the cursor is in a gap.
*/
ul:hover {
  cursor: none;
}

/*
  This is where the magic happens! This might be hard to read at first but we can ask ChatGPT for a useful translation:
  "Select the cursor element inside the cursor overlay that has a data-target attribute containing "one" when list item "one" is hovered over and set its opacity to 1 with a transition delay of 0.2 seconds."
  For this to work, the two main elements (ul and .cursor-overlay) must sit at the same level in the DOM (they don't need to be direct descendants)
  This is a bit cumbersome to write for every possible list item, in a more complete project I would probably set that particular CSS rule at the item's level.
*/
ul:has(li#one:hover) ~ .cursor-overlay .cursor [data-target*='one'],
ul:has(li#two:hover) ~ .cursor-overlay .cursor [data-target*='two'],
ul:has(li#three:hover) ~ .cursor-overlay .cursor [data-target*='three'],
ul:has(li#four:hover) ~ .cursor-overlay .cursor [data-target*='four'],
ul:has(li#five:hover) ~ .cursor-overlay .cursor [data-target*='five'],
ul:has(li#six:hover) ~ .cursor-overlay .cursor [data-target*='six'] {
  opacity: 1;
  transition-delay: 0.2s;
}

And that's it! A simple, modern, portable way to create a hover effect that replaces the cursor with a string of text. You can easily extend this to include more complex animations, or even use it to create a custom cursor effect for your website.

And here's the final result! https://codepen.io/Far0s/pen/yLwqjPr.

CSS is so fun to write these days, I could figure out little gems like that every day and never get bored of it. I hope you enjoyed this little tutorial, and I hope it helps you in your future projects!