<div class="imagezoom-container" style="width: 100px; height: 100px;">
  <input type="text" class="imagezoom" style="
    background-image: url(http://via.placeholder.com/640x480.png?text=Image%201);
  ">
  <div class="imagezoom-background"></div>
  <button class="imagezoom-close">
    &times;
  </button>
</div>

<div class="imagezoom-container" style="width: 100px; height: 100px;">
  <input type="text" class="imagezoom" style="
    background-image: url(http://via.placeholder.com/640x480.png?text=Image%202);
  ">
  <div class="imagezoom-background"></div>
  <button class="imagezoom-close">
    &times;
  </button>
</div>

.imagezoom-container {
  display: inline-block;
  margin: 10px;
}

.imagezoom {
  background-size: cover;
  background-position: center;
  border: 0 none;
  color: rgba(0, 0, 0, 0);
  cursor: pointer;
  width: inherit;
  height: inherit
}
.imagezoom::selection {
  display: none;
}

.imagezoom:focus {
  /* Make the "image" fill the entire screen */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: calc(100vw - 200px) !important;
  height: calc(100vh - 100px) !important;
  min-width: 600px

  /* Style the background-image */
  background-size: contain;
  background-repeat: no-repeat;
  margin: 50px 100px;

  /* Remove the background-color by making it fully transparent */
  background-color: rgba(0, 0, 0, 0);

  /* Get rid of default focus styling */
  z-index: 2;
  border: 0 none;
  outline: none;
}

/* The background */
.imagezoom-background {
  display: none;
}
.imagezoom:focus ~ .imagezoom-background {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.8);
}

.imagezoom-close {
  display: none;
}
.imagezoom:focus ~ .imagezoom-close {
  display: block;
  background: none;
  border: 0 none;
  color: #fff;
  width: 30px;
  height: 30px;
  font-size: 30px;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2;
  cursor: pointer;
}

// Look, Ma, no JS!