<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Text Hover Effect</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <div>Lofi</div>
      <div>Motivation</div>
      <div>Profiles</div>
      <div>Goals</div>
      <div>Academics</div>
    </nav>
    <div class="cursor"></div>
    <script src="script.js"></script>
  </body>
</html>

* {
    cursor: none;
}

html, body {
    width: 99%;
    height: 99%
}

body {
    display: flex;
    align-items: center;
}

nav {
    font-size: 6rem;
    display: grid;

}

nav > div:not(div:nth-child(5)) {
    border-bottom: solid ;
}

.cursor {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: black;
    /*Keeps our custom cursor on the user's screen*/
    position: fixed;
    pointer-events: none;
    /*makes sure the background images will sort of fit the cursor*/
    background-size: cover; 
    transition: scale 300ms;
}

.cursorGrow {
scale: 8;
}


@media (max-width: 480px) {
    nav {
        font-size: 4.8rem;
    }
}
let cursor = document.querySelector(".cursor");
let divs = document.querySelectorAll("div:not(.cursor)");
const classNames = ["lofi", "motivation", "profiles", "goals", "academics"];

function cursorControl(e) {
//tracks the cursors coordinates
  let x = e.clientX;
  let y = e.clientY;
//places the custom cursor onto the cursor coordinates
  cursor.style.top = `${y}px`;
  cursor.style.left = `${x}px`;
}

document.addEventListener("mousemove", cursorControl);

divs.forEach((div) => {
  div.addEventListener("mouseenter", function () {
    cursor.classList.add("cursorGrow");
  });
  div.addEventListener("mouseleave", function () {
    cursor.classList.remove("cursorGrow");
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.