⚠️ Don't try this at home: CSS-only imag ...

⚠️ Don't try this at home: CSS-only image detail zoom - As hacky as possible! 🖼️🔍

Nov 10, 2021

So, on some webshops, when clicking on a small product image, the image opens up in a zoomed version. This is especially useful when the product images are, say, sets of different parts and you want to have a look at the individual parts. Or read a small sentence on the packaging.

To make things a little more convenient, I also want to add the possibility to close the modal with the ESC key. Don't worry, we'll be able to hack that without JS.

So, click on small image opens large image in modal. ESC key and close button close it again. Sounds good.

But beware: We'll be hacking our way through. This will involve a lot of dirty hacks and bad practices that will make most screen readers and older browsers go bonkers and/or cry bitter tears of sorrow and despair. We're going to do that on purpose, it should be bad. The... thing we're about to create is meant to serve as a bad example on what not to do. There. You've been warned.

Read the full post on dev.to!

Enjoy this post?

Buy Pascal Thormeier a coffee

More from Pascal Thormeier