<nav class="menu">
  <a href="#" class="menu-item" data-img="https://placehold.co/400x300/3b82f6/ffffff?text=Project+1">
    <span>01</span>
    <span>Branding</span>
  </a>
  <a href="#" class="menu-item" data-img="https://placehold.co/400x300/8b5cf6/ffffff?text=Project+2">
    <span>02</span>
    <span>Development</span>
  </a>
  <a href="#" class="menu-item" data-img="https://placehold.co/400x300/ec4899/ffffff?text=Project+3">
    <span>03</span>
    <span>Marketing</span>
  </a>
</nav>

<div class="cursor-img"></div>

* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  background: #111;
  color: white;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.menu {
  display: flex;
  flex-direction: column;
  width: 400px;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid #333;
  text-decoration: none;
  color: #999;
  font-size: 1.5rem;
  transition: color 0.3s;
  cursor: none; /* Hide default cursor over links */
}

.menu-item:hover {
  color: white;
}

.cursor-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 150px;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 10;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.cursor-img.active {
  opacity: 1;
  transform: scale(1);
}

const items = document.querySelectorAll(".menu-item");
const preview = document.querySelector(".cursor-img");

document.addEventListener("mousemove", (e) => {
  // Move the image with the mouse
  preview.style.left = e.clientX + 20 + "px";
  preview.style.top = e.clientY - 75 + "px";
});

items.forEach(item => {
  item.addEventListener("mouseenter", () => {
    const img = item.getAttribute("data-img");
    preview.style.backgroundImage = "url(" + img + ")";
    preview.classList.add("active");
  });
  
  item.addEventListener("mouseleave", () => {
    preview.classList.remove("active");
  });
});

Back to Snippets

Hover Image Reveal Links

Create an artistic navigation menu where images appear floating near the cursor when hovering over links. This effect is popular in creative portfolios and adds a high-end feel to simple lists.

522

#javascript

#css

#navigation

#hover effect

#image reveal

#portfolio

#cursor

/HTML *CSS ()JS Output Live Updates

Hover Image Reveal Links

Share Code Snippet