JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div> Hover over and click the images to see the visual effects. Hit an image to show a popup one. Click on the popup image to fade it out. Click outside the popup image to quickly remove it. Scroll to enlarge and shrink the image. Press 'M' to auto fit. Try drag the image around; or use the direction keys. Press esc anytime to remove the popup image. Double click to fade out. Scroll to enlarge and shrink the image. </div>
  <img src='http://www.conservapedia.com/images/a/ab/Apple-logo.png' />
  <img style='width:200px;' src='https://www.seeklogo.net/wp-content/uploads/2015/09/new-google-favicon-logo.png' />
</body>

CSS

img.noImgEffect:hover {
  -webkit-filter: none;
}

img.noImgEffect:active {
  -webkit-transform: none;
}

img:hover {
  -webkit-filter: drop-shadow(0 0 3px gray);
}

img:active {
  -webkit-transform: scale(0.975);
}

JavaScript

/* 
 * This recipe finds all the images on the page and set hover/active styles
 * to them. On clicking an image, a copy of it pops up at the center of the browser with
 * fade-in effect, and the background is dimmed and blurred. The
 * popup image is removed with another click or esc, also with fading effect. On
 * keydown, 'M', the image is zoomed to fit the browser, with fading and blur effects. On
 * wheel, the popup image size can be adjusted freely. When either the width or the 
 * height exceed the browser size, the popup image can be dragged.
 *
 * This program is free software; you can redistribute it
 * and/or modify it under the terms of the GNU General
 * Public License as published by the Free Software
 * Foundation; either version 3 of the License, or (at your
 * option) any later version. Available at
 * https://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2016 Ling-San Meng (f95942117@gmail.com)
 * Version 20160726
 */

// Main function handling the popup effects.
window.addEventListener('load', ImgfocusPopupImgOnClick, false);

function ImgfocusPopupImgOnClick() {

  ImgfocusFadeInTime = 125;
  ImgFocusFadeOutTime = 200;
  ImgfocusZoomToFitTime = 100;
  
  var imgElement = document.getElementsByTagName("img");

  for (var i = 0; i < imgElement.length; i++) {
    // Skip images that are hyperlinks
    if (imgElement[i].parentNode.tagName.toLowerCase() == 'a') {
      continue;
    }

    // Apply the popup function on clicking the image
    imgElement[i].onclick = function() {
      if (document.getElementById('ImgfocusPopupImage') == null) {
        // Create the popup image
        var imgEnlarge = document.createElement('img');
        imgEnlarge.src = this.src;

        // Blur and dim the background and then show the popup image on image load.
        imgEnlarge.onerror = function() {
          imgEnlarge.remove();
        }
        imgEnlarge.onload = function() {
          // Create a new div overlaying the page as the dimmer.
          var...