<img src="">
<ul>
  <li class="item" data-image="https://ct112013.files.wordpress.com/2013/07/pasteeel.jpg">WOMAN</li>
  <li class="item" data-image="https://i.pinimg.com/736x/1a/e9/ff/1ae9ff68eddb75113cc797f1324515b9--color-coordination-reiss.jpg">MAN</li>
  <li class="item" data-image="http://www.todaysparent.com/wp-content/uploads/2014/02/Mint1.jpg">KID</li>
</ul>
@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: #ffebd5;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  cursor: default;
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  li {
    font-family: 'Belleza', sans-serif;
    position: relative;
    font-size: 80px;
    text-align: center;
    -webkit-text-stroke: 1px black;
    color: transparent;
    margin-bottom: 40px;
    z-index: 1;
  }
}

img {
  position: absolute;
  width: 15vw;
  object-fit: contain;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  left: 50%;
  cursor: pointer;
  z-index: 10;
  transition: all 1s ease;
  will-change: transform;
}
View Compiled

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', '')
  })
})


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.