{"id":671,"date":"2024-01-29T13:12:20","date_gmt":"2024-01-29T19:12:20","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=671"},"modified":"2024-01-29T15:54:08","modified_gmt":"2024-01-29T21:54:08","slug":"glowing-hover-effect","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/glowing-hover-effect\/","title":{"rendered":"How To Build a Glowing Hover Effect that Follows the Pointer"},"content":{"rendered":"\n

One of the Top Pens of 2023<\/a> was this Glowy Hover Effect<\/a> by Ines. When I was taking a look at it<\/a>, it finally clicked how it works. In a nutshell, there are two copies<\/em> of the same HTML layered on top of one another. The top one has a fancy colors and such, but it ultimately “masked” such that you can only see part of it at a time. As you move the pointer around, the mask moves with it, making it look like the glowing is happening wherever the pointer is.<\/p>\n\n\n\n

Let’s do it step by step. And again, this is just my own explanation of how Ines<\/a> pulled this off. <\/p>\n\n\n\n

1) Duplicate and Hide Another Layer of HTML<\/h2>\n\n\n\n

To keep this simple, let’s say we’re dealing with a single Card element.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Our job is to duplicate the HTML that produces this, and place it directly on top of the original. <\/p>\n\n\n

<main<\/span> id<\/span>=\"main\"<\/span>><\/span>\n\n  <div<\/span> class<\/span>=\"card\"<\/span>><\/span>\n    <h2<\/span>><\/span>Lorem ipsum dolor sit.<\/h2<\/span>><\/span>\n    <p<\/span>><\/span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit nobis veniam sit sint est temporibus eligendi neque ducimus doloribus facere doloremque, vel accusamus, eos ab iste. Eveniet atque alias consequatur.<\/p<\/span>><\/span>\n    <button<\/span>><\/span>Read More<\/button<\/span>><\/span>\n  <\/div<\/span>><\/span>\n\n  <div<\/span> class<\/span>=\"overlay\"<\/span> aria-hidden<\/span>=\"true\"<\/span>><\/span>\n    <!-- duplicate will go here --><\/span>\n  <\/div<\/span>><\/span>\n\n<\/main<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Above we have the original HTML, and a place to put the duplicated HTML. We can ensure the duplicate is exactly on top, in this setup, like:<\/p>\n\n\n
main<\/span> {\n  position<\/span>: relative;\n}\n\n.overlay<\/span> {\n  position<\/span>: absolute;\n  inset<\/span>: 0<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Then we’ll do the actual duplication like:<\/p>\n\n\n
const<\/span> main = document<\/span>.querySelector(\"#main\"<\/span>);\nconst<\/span> content = main.querySelector(\":scope > *\"<\/span>);\nconst<\/span> clone = content.cloneNode(true<\/span>);\nconst<\/span> overlay = document<\/span>.querySelector(\".overlay\"<\/span>);\noverlay.insertAdjacentElement(\"beforeend\"<\/span>, clone);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
I chose to use cloneNode<\/code> here in case we wanted do manipulate the HTML in any way before inserting. We’re not really doing that here, so we could have used innerHTML<\/code> and insertAdjacentHTML<\/code> instead, but whatever, always multiple ways to crack an egg.<\/p>\n\n\n\n
Now we’ve got our two copies.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
See how I’ve made the top layer all full of colors. That’s the one we’ll reveal only parts of to achieve this effect.<\/p>\n\n\n\n
2) Hide the Top Layer in a Mask<\/h2>\n\n\n\n
That whole top layer is in an <div class=\"overlay\" aria-hidden=\"true\"><\/code>. The aria-hidden<\/code> attribute is there because that bit of HTML should be entirely ignored by screen readers. <\/p>\n\n\n\n
The overlay class is what gives us an opportunity to do fancy styling.<\/p>\n\n\n
.card<\/span> {\n  \/* default styling *\/<\/span>\n  max-width<\/span>: 50ch<\/span>;\n  border<\/span>: 2px<\/span> solid #333<\/span>;\n  padding<\/span>: 3rem<\/span>;\n  border-radius<\/span>: 0.5rem<\/span>;\n\n  \/* hover mask styling *\/<\/span>\n  .overlay & {\n    background<\/span>: linear-gradient<\/span>(\n      45deg<\/span>,\n      hsl(0<\/span>, 100%<\/span>, 50%<\/span>),\n      hsl<\/span>(60<\/span>, 100%<\/span>, 50%<\/span>),\n      hsl<\/span>(120<\/span>, 100%<\/span>, 50%<\/span>),\n      hsl<\/span>(180<\/span>, 100%<\/span>, 50%<\/span>),\n      hsl<\/span>(240<\/span>, 100%<\/span>, 50%<\/span>),\n      hsl<\/span>(300<\/span>, 100%<\/span>, 50%<\/span>),\n      hsl<\/span>(360<\/span>, 100%<\/span>, 50%<\/span>)\n    );\n    border-color<\/span>: white;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The trick to mostly hide the overlay element is the masking. But we’ll also make sure it’s entirely visual and doesn’t snag any clicks or anything.<\/p>\n\n\n
.overlay<\/span> {\n  position<\/span>: absolute;\n  inset<\/span>: 0<\/span>;\n\n  \/* visual only, don't steal clicks or interactions *\/<\/span>\n  pointer-events<\/span>: none;\n  user-select<\/span>: none;\n\n  \/* JavaScript will make this visible. This ensures progressive enhancement *\/<\/span>\n  opacity<\/span>: var<\/span>(--opacity, 0<\/span>);\n\n  -webkit-mask<\/span>: radial-gradient<\/span>(\n    25rem<\/span> 25rem<\/span> at var(--x) var<\/span>(--y),\n    #000<\/span> 1%<\/span>,\n    transparent 50%<\/span>\n  );\n  mask<\/span>: radial-gradient<\/span>(\n    25rem<\/span> 25rem<\/span> at var(--x) var<\/span>(--y),\n    #000<\/span> 1%<\/span>,\n    transparent 50%<\/span>\n  );\n\n  \/* smooooooth *\/<\/span>\n  transition<\/span>: 400ms<\/span> mask ease;\n  will-change<\/span>: mask;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
So now we can only see a part<\/em> of the overlay, a circular 25rem bit, as per the mask:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
3) Positioning the Mask<\/h2>\n\n\n\n
But how does it know where<\/em> to put the center of that mask? Well note the var(--x) var(--y)<\/code> coordinates! Those are set in JavaScript:<\/p>\n\n\n
const<\/span> applyOverlayMask = (e<\/span>) =><\/span> {\n  const<\/span> overlayEl = e.currentTarget;\n  const<\/span> x = e.pageX - main.offsetLeft;\n  const<\/span> y = e.pageY - main.offsetTop;\n  overlayEl.style = `--opacity: 1; --x: ${x}<\/span>px; --y:${y}<\/span>px;`<\/span>;\n};\n\ndocument<\/span>.body.addEventListener(\"pointermove\"<\/span>, applyOverlayMask);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Now it follows the pointer around.<\/p>\n\n\n\n\t\t
\n\t\t\t