JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="container">
    <h1>Hover over an image to see a larger view of the painting.</h1>

    <div>
      <img src="images/Mona_Lisa.jpg" alt="Mona Lisa by Leonardo da Vinci">
    </div>

    <div>
      <img src="images/Starry_Night.jpg" alt="The Starry Night by Vincent van Gogh">
    </div>

    <div>
      <img src="images/The_Scream.jpg" alt="The Scream by Edvard Munch">
    </div>

    <div>
      <img src="images/The_Last_Supper.jpg" alt="The Last Supper by Leonardo da Vinci">
    </div>

    <div>
      <img src="images/American_Gothic.jpg" alt="American Gothic by Grant Wood">
    </div>

    <div>
      <img src="images/Creación_de_Adán_(Miguel_Ángel).jpg" alt="The Creation of Adam by Michelangelo">
    </div>

    <div>
      <img src="images/the-persistence-of-memory.jpg" alt="The Persistence of Memory by Salvador Dalí">
    </div>

    <div>
      <img src="images/Meisje_met_de_parel.jpg" alt="Girl with a Pearl Earring by Johannes Vermeer">
    </div>

    <div>
      <img src="images/nighthawks.jpg" alt="Nighthawks by Edward Hopper">
    </div>
  </div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
  margin: 0;
  background-color: #111;
  font-family: 'Open Sans', sans-serif;
  color: #e8e8e8;
}

h1 {
  font-size: 1.5em;
}

.container {
  max-width: 510px;
  padding: 10px;
  margin: 0 auto;
}

.container div {
  float: left;
  margin: 10px;
  width: 150px;
  height: 150px;
  text-align: center;
}

img {
  max-width: 150px;
  max-height: 150px;
  cursor: zoom-in;
}

div.image-display {
  position: absolute;
}

div.image-display img {
  max-width: 500px;
  max-height: 500px;
}

JavaScript

document.querySelector('.container').addEventListener('mouseover', function(e) {
  e.preventDefault();
  if (e.target.tagName === 'IMG') {

    var myElement = document.createElement('div');
    myElement.className = 'preview';
    e.target.parentNode.appendChild(myElement);

    var myImg = document.createElement('img');
    var imgLoc = e.target.src;
    myImg.src = imgLoc;

    myElement.style.left = e.offsetX + 5 + 'px';
    myElement.style.top = e.offsetY + 5 + 'px';
    myElement.style.position = 'relative';
    myElement.appendChild(myImg);

    e.target.addEventListener('mouseout', function handler(d) {
      var myNode = d.target.parentNode.querySelector('div.preview');
      myNode.parentNode.removeChild(myNode);
      e.target.removeEventListener('mouseout', handler, false);
    }, false);

    e.target.addEventListener('mousemove', function(f) {
      myElement.style.left = f.offsetX + 5 + 'px';
      myElement.style.top = f.offsetY + 5 + 'px';
    });

  }
}, false);