<p><img class="thumb" src="https://placeimg.com/120/150/architecture">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor a leo et ullamcorper. Integer mi risus, consectetur at ornare sed, bibendum vitae purus. Mauris vel dolor vitae urna pretium rhoncus in id nulla. Phasellus ac odio laoreet, commodo ante at, mattis nunc. Proin auctor metus fringilla, imperdiet elit viverra, cursus mi. Suspendisse ex ex, molestie id enim ac, faucibus porttitor odio. Nulla id sodales nulla. Duis nec vehicula turpis, ornare dapibus dolor. Aenean ac sem sed arcu cursus ullamcorper. Praesent non nisl ligula. Mauris est dolor, semper quis tempor vel, convallis eget nisi. Proin imperdiet justo at molestie tristique. In hac habitasse platea dictumst. Integer sollicitudin lorem nec mi tempus, ut sagittis leo interdum. Maecenas vehicula elit porta ligula tempor commodo. Sed vel urna sed eros elementum accumsan.</p>
<dialog>
  <img src="https://placeimg.com/320/480/any">
  <form method="dialog">
    <button>Close x</button>
  </form>
</dialog>

<p><img class="thumb" src="https://placeimg.com/120/150/people">Nunc auctor purus eu tincidunt blandit. Duis pellentesque nec libero sed scelerisque. Pellentesque aliquet sagittis magna ut iaculis. Mauris at risus ut nunc mollis pulvinar. Ut scelerisque nulla accumsan, tempus neque nec, ultrices velit. Nam eget nibh mi. Nunc id condimentum erat. Duis et sollicitudin felis. Mauris ac quam commodo, scelerisque diam ut, porttitor nunc. Nunc tellus nisl, commodo et urna ultrices, efficitur blandit urna. Pellentesque quis rhoncus sem. Quisque porta commodo leo eget convallis. Aliquam luctus rutrum fringilla. Duis iaculis aliquam risus sed accumsan. Suspendisse id condimentum nisi. Fusce dictum ipsum non posuere dictum.</p>
<dialog>
  <img src="https://placeimg.com/480/600/people">
  <form method="dialog">
    <button>Close x</button>
  </form>
</dialog>

<p><img class="thumb" src="https://placeimg.com/120/150/animals">Sed ut congue turpis. Nulla elementum convallis laoreet. Duis metus purus, sodales sed commodo ac, rhoncus ut nibh. Proin sit amet quam sed mi placerat viverra. Phasellus vitae aliquam purus, non tincidunt nisl. Sed est purus, ornare id rutrum at, ultricies vel orci. Nam imperdiet sollicitudin pharetra. Nam vel lorem arcu. Donec pellentesque odio vitae massa laoreet pretium. In in ullamcorper elit. Nunc orci nisl, auctor eu commodo quis, eleifend a risus. Vestibulum rhoncus magna odio, et pellentesque quam pharetra a. Quisque pellentesque dignissim lobortis.</p>
<dialog>
  <img src="https://placeimg.com/480/600/animals">
  <form method="dialog">
    <button>Close x</button>
  </form>
</dialog>

<p><img class="thumb" src="https://placeimg.com/120/150/nature">Sed fermentum luctus semper. Duis interdum, diam dapibus consequat elementum, arcu ligula ultricies est, nec condimentum eros lorem non dolor. Cras ullamcorper nulla orci, nec blandit erat congue quis. Nullam vel enim ultricies, iaculis ex a, rutrum ex. Donec eleifend pharetra quam. Morbi ac scelerisque urna, ut tristique est. Ut gravida ante vitae blandit pulvinar. Etiam ornare pretium dictum. Fusce eu egestas nunc, at eleifend quam. Praesent at cursus lorem, at tincidunt elit. Sed congue leo nec vestibulum fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<dialog>
  <img src="https://placeimg.com/480/600/nature">
  <form method="dialog">
    <button>Close x</button>
  </form>
</dialog>

body {
  max-width: 40em;
}

.thumb {
  float: right;
  padding-left: 10px;
  cursor: zoom-in;
}
dialog {
  border: 1px solid #666;
}
dialog form {
  text-align: center;
}
dialog button {
  cursor: pointer;
  margin-top: 15px;
  background-color: white;
  border: none;
}
dialog::backdrop {
  background-color: rgba(128, 128, 128, 0.4);
}

const images = document.querySelectorAll(".thumb");
const dialogs = document.querySelectorAll("dialog");
images.forEach(function (img, i) {
  img.addEventListener("click", function () {
    console.dir(dialogs[i])
    dialogs[i].showModal();
  });
});