TIL: How You Can Zoom in on Photos in your Hugo Posts

You can see what we want to achieve in the GIF below:


Add the following code to your Hugo blog in my case using the Papermod theme I add it to the layouts/partials/extend_footer.html.


  const images = Array.from(document.querySelectorAll(".post-content img"));
  images.forEach((img) => {
    mediumZoom(img, {
      margin: 0 /* The space outside the zoomed image */,
      scrollOffset: 40 /* The number of pixels to scroll to close the zoom */,
      container: null /* The viewport to render the zoom in */,
      template: null /* The template element to display on zoom */,
      background: "rgba(0, 0, 0, 0.8)",

The highlighted line may need to change depending on how your blog is setup. For my blog using the PaperMod theme. This gets all the images on the page .post-content img.