Click/Hover to Zoom

I used a deck once where if you clicked on one of the images it zoomed in, but for the life of me I can’t figure out how to do that. I have another deck where the First Aid pictures don’t get zoomed in, they just kind of pop out if that makes sense. That deck I recall also let you zoom in by just hovering over it without clicking, if you messed with the code a bit. If anyone could help me with the code I would really appreciate it. Thank you.

1 Like

I wrote the below to display all images within the element with class name yourClassName as a modal dialogue on click:

Back card template:

<dialog data-image-modal></dialog>
  (function () {
    let all_images = document.querySelectorAll(".yourClassName img");
    let image_modal = document.querySelector("dialog[data-image-modal]");

    all_images.forEach((image) => {
      image.addEventListener("click", (e) => {
        image_modal.innerHTML = `<img src="${image.src}" />`;

    image_modal.addEventListener("click", (e) => {
      if ( === image_modal) {


/* Get rid of 3px gap at the bottom of images due to inline behaviour */
img {
	vertical-align: bottom;

dialog {
	border: none;
	padding: 0;

Oh wow! Thank you so much!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.