Seb Dancer-Michel

Web developer –

Hi there!

I’m Seb, a web developer with 5+ years of experience making

With an affinity for front-end development and UI design, I focus my efforts on crafting adequate interfaces between humans and technology.

Discover my workDiscover my work

Read my blogRead my blog

29 years old, living in Amsterdam, Netherlands and originally from Toulouse, France. Curious about mostly everything. An optimist at heart, always tries to focus on the bright side of things. A lover of memes, cats, red pandas, and cute animals in general. A millenial in mind and spirit. Will always strive to improve our world in the smallest ways.

Seb Dancer-Michel

Solving puzzles is what I love doing most.

To find pragmatic solutions to practical problems and ideas. Whether it’s building a web page, a contact form, an interactive installation, or a hands-free display, I’m always looking to shape the adequate interface.

I have a broad horizontal knowledge of all things Internet and tech, and my curiosity pushes me to learn new things and adapt to the fast changing Web continuously.

What I use regularly: HTML, CSS, Javascript/Typescript, ReactJS, and ThreeJS.

Previously

  • 2023-now – Freelance
  • 2019-2023 – Your Majesty – full time contract
  • 2018 – Werkstatt – 6 mo. apprenticeship
  • 2017 – Your Majesty – 5 mo. internship
  • 2016 – Cinémur – 4 mo. internship
  • 2015 – Purée Maison – 3 mo. internship
  • 2014 – Oréalys – 2 mo. internship

I studied at HETIC (and got my masters degree) between 2014 and 2019, going through a multi-disciplinary program teaching us design, web development, communication, marketing, entrepreneurship, and everything else.

I was involved with the largest student movement in France, the Junior-Entreprises. I worked for 1 year at HETIC's own J.E., Synerg'hetic, then volunteered to work as part of the team of 20 students managing the French confederation on a national level.

2024-04-04RSS feedRSS feedCursor hover zone effect using CSS

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!

See you on the Internet! 👋

Seb Dancer-Michel © 2024

Mastodon