On my blog, I have everything as a set width. All of the lines and code blocks and images are within its container, and I like it that way!

But, I did notice that it made some images on my blog a bit smaller than I’d like. When I published this post on GitHub Copilot Edits, the screenshots needed to be wider, but I didn’t want to change my container setup.

So, I worked some HTML <dialog> magic (using one of the tips I shared here) and set it up so that as I add images to a post, you can click on them and see them a bit bigger in a pop up! You can try it out here:

What this does, more granularly, is it:

• Adds a zoom-in cursor over images so that a user can tell that they can zoom on the image
• Styles the dialog so that it has a blurred backdrop
• Uses CSS clamp() to control the image size and not make it too big if it’s a smaller image
• Adds a little “fade in” animation
• Adds a click listener for if the user clicks outside of the dialog, it will close the dialog (otherwise they can hit ESC)
• Only runs on non-mobile devices (since it’s easier to zoom on a phone)

So, without having to adjust how I write my posts in markdown, I have this functionality attached to every image in every post!

And if you want to see the code in action to use it yourself, check it out on CodePen:

See the Pen Dialog on image click by Cassidy (@cassidoo) on CodePen.