DEV Community

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

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

Pascal Thormeier on November 06, 2021

No, seriously, don't. We'll be hacking our way through. This will involve a lot of dirty hacks and bad practices that will make most screen readers...
Collapse
 
grahamthedev profile image
GrahamTheDev

Oh it hurts but I love it at the same time. ❤

I have been staring at the HTML for a couple of minutes trying to work out how I would make it accessible if I came across this in the real world.

I think I have only one answer though....kill it with fire! 🤣

Collapse
 
thormeier profile image
Pascal Thormeier

Yup, kill it with fire indeed! To be honest, I had a great time digging in dirt for once lol

I think trying to make stuff as dirty and hacky as possible every once in a while helps with staying creative :)

Collapse
 
thormeier profile image
Pascal Thormeier

Oh, also: When I got that working with the input field, my first thought was "Why does this work, I don't want this to work" 🤣

Collapse
 
grahamthedev profile image
GrahamTheDev

Well I do have a whole series of things "breaking the internet" here on dev, so who am I to say anything as none of them are accessible 😋🤣

Thread Thread
 
thormeier profile image
Pascal Thormeier • Edited

To be honest, hacking that modal like this felt way too easy! The DOM is minimal, the CSS isn't exactly rocket science either. In my opinion, it's such a pity that it's so easy to make things so horribly inaccessible. Doing them right should be the easy thing.

Collapse
 
mangoman profile image
Nauman Khan

Why type "border: 0 none;"? We should get the same result if we don't type this.

Collapse
 
thormeier profile image
Pascal Thormeier

border: 0 none removes the default border some browsers give inputs. It's just to make sure that the image has no unwanted border around it, so mostly a cosmetic thing. Does that answer your question?

Collapse
 
mangoman profile image
Nauman Khan

Yes, maybe I haven't witnessed a browser with default border yet. So...

Collapse
 
nuritnt profile image
Tuğçe Nur Taş

🔥 I like your dumpsterfire 🤣🔥 thanks for the shoutout!
looking forward to your next article!

Collapse
 
thormeier profile image
Pascal Thormeier

Thank you so much for the idea to create that dumpster fire in the first place! Already working on my next one, will be a bit more artsy than this.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

You can use this approach to build the same without the need of inputs:

dev.to/joelbonetr/build-your-own-c...

Collapse
 
thormeier profile image
Pascal Thormeier

That's a very handy article, thank you! My goal here was not to deliver a clean approach at all, though, I wanted this to be bad, honestly :D

Collapse
 
thormeier profile image
Pascal Thormeier

Unfortunately, that article doesn't exist anymore, I'm getting a 404... Would it have been related to the this topic?

Collapse
 
abhishekraj272 profile image
Abhishek Raj

This was quite interesting!! 😎

Collapse
 
thormeier profile image
Pascal Thormeier

Thank you so much! Digging in dirt every now and then is so much fun! :D