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
 
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
 
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
 
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
 
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
 
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