<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <img src="" class="image-reveal"> <ul> <li class="item" data-image="https://images.pexels.com/photos/3323208/pexels-photo-3323208.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">DAZED</li> <li class="item" data-image="https://images.pexels.com/photos/1816606/pexels-photo-1816606.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">MOTION</li> <li class="item" data-image="https://images.pexels.com/photos/3841338/pexels-photo-3841338.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">IDENTITY</li> <li class="item" data-image="https://images.pexels.com/photos/3597031/pexels-photo-3597031.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"> BRANDING</li> <li class="item" data-image=" https://images.pexels.com/photos/3597032/pexels-photo-3597032.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500 ">VEMON</li> </ul> <script> const items = document.querySelectorAll('.item') const image = document.querySelector('img') items.forEach((el) => { el.addEventListener('mouseover', (e) => { imageData = e.target.getAttribute('data-image') console.log(imageData) e.target.style.zIndex = 99 image.setAttribute('src', imageData) }) el.addEventListener('mousemove', (e) => { image.style.top = e.clientY + 'px' image.style.left = e.clientX + 'px' }) el.addEventListener('mouseleave', (e) => { e.target.style.zIndex = 1 image.setAttribute('src', '') }) }) </script>

@import url("https://fonts.googleapis.com/css?family=Belleza"); html, body { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100vw; height: 100vh; background-color: black; display: flex; justify-content: center; align-items: center; } ul { list-style: none; padding: 0; margin: 0; position: relative; } ul li { font-family: "Belleza", sans-serif; position: relative; font-size: 80px; text-align: center; -webkit-text-stroke: 1px white; color: transparent; margin-bottom: 40px; z-index: 1; } img.image-reveal { position: absolute; width: 400px; height: auto; object-fit: contain; transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; z-index: 10; }