JSFiddle - React, Tailwind, and code Playground

by Benahmed Taoufiq

HTML

<body>
  <div class="main">

    <div class="mouse"></div>
    <ul>
      <li>frame
        <img src="https://images.unsplash.com/photo-1711677371698-4496b754c4b1?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1MDN8&ixlib=rb-4.0.3&q=85" class="pic" alt="architecture">
      </li>
      <li>vertical
        <img src="https://images.unsplash.com/photo-1711098288630-30b69a86be92?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1MDN8&ixlib=rb-4.0.3&q=85" class="pic" alt="pieds">
      </li>
      <li>board
        <img src="https://images.unsplash.com/photo-1712187466004-c64b4571828b?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1MDN8&ixlib=rb-4.0.3&q=85" class="pic" alt="femme">
      </li>
      <li>popular
        <img src="https://images.unsplash.com/photo-1711109631427-f90f9d83364b?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1NzF8&ixlib=rb-4.0.3&q=85" class="pic" alt="couple">
      </li>
      <li>trends
        <img src="https://images.unsplash.com/photo-1711861399198-649bc0ddc33f?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1NzF8&ixlib=rb-4.0.3&q=85" class="pic" alt="architecture">
      </li>
      <li>brand
        <img src="https://images.unsplash.com/photo-1713623633904-a0a8dca6fafc?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1NzF8&ixlib=rb-4.0.3&q=85" class="pic" alt="paysage">
      </li>
      <li>almost
        <img src="https://images.unsplash.com/photo-1712181938400-a76d207d4fcb?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU2NzF8&ixlib=rb-4.0.3&q=85" class="pic" alt="femme africaine">
      </li>
    </ul>

  </div>



</body>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  font-size: 16px;
  font-family: verdana;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: #151316;
  display: grid;
  place-items: center;
}

::-webkit-scrollbar {
  display: none;
}


.main {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

ul {
  height: 60vmin;
}


ul li {
  color: #3a3a3a;
  text-transform: capitalize;
  font-size: 6vw;
  font-weight: 600;
  list-style: none;
  text-align: center;
  letter-spacing: 3px;
  position: relative;
}

img {
  display: block;
  width: 350px;
  height: 400px;
  object-fit: cover;

}

.pic {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

.mouse {
  width: 60px;
  height: 60px;
  background-color: #d7d98d;
  border-radius: 100px;
  position: absolute;
  transition: transform .3s;
}


.appear {
  opacity: 1;
}

JavaScript

const souris = document.querySelector('.mouse');
const mots = document.querySelectorAll('li');
// console.log(souris);

window.addEventListener("mousemove", (e) => {
  // console.log(e);
  souris.style.left = e.pageX - souris.offsetWidth / 2 + "px";
  souris.style.top = e.pageY - souris.offsetHeight / 2 + "px";
})

mots.forEach(element => {
  element.addEventListener("mouseenter", () => {
    element.querySelector('.pic').classList.toggle('appear')
  })

  element.addEventListener("mouseout", () => {
    element.querySelector('.pic').classList.toggle('appear')
  })
});