<img is="light-box" src="https://assets.codepen.io/1804713/ninja2.svg" data-lbsrc="https://assets.codepen.io/1804713/ninja2.svg" alt="Silent but Undeadly Zombie Ninja">
img {
  width: 200px;
  height: auto;
}
customElements.define(
  "light-box",
  class LightBox extends HTMLImageElement {
    constructor() {
      super();
      let lb = document.createElement("div");
      lb.style.display = "none";
      lb.style.position = "absolute";
      lb.style.height = "100vh";
      lb.style.width = "100vw";
      lb.style.top = 0;
      lb.style.left = 0;
      lb.style.background =
        "rgba(0,0,0, 0.7) url(" + this.dataset.lbsrc + ") no-repeat center";
      lb.style.backgroundSize = "contain";
      lb.addEventListener("click", function (evt) {
        this.style.display = "none";
      });
      this.parentNode.insertBefore(lb, this);
      this.addEventListener("click", function (evt) {
        lb.style.display = "block";
      });
    }
  },
  { extends: "img" }
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.