Is it possible to make a img gallery only using HTML/CSS and still having it look cool?
I just wanted to know would it be possible to create an img gallery with only html/css and still allow the user to interact with it? For example they can click on an img and the img pops up to the center of their screen
11 Replies
Yes, but this is normally done using basic JS skills. Doing it without JS requires advanced CSS skills, so it's actually easier to do with JS. You would need to use either the checkbox hack or a focus within to keep the image enlarged without having JS to keep state. Toggling is far easier with the checkbox approach.
I see it's mainly because I haven't learnt JS yet and I wanted to create a quick porject
If you really want to do it, this is an example: https://codepen.io/chooking/pen/GReENxL
Dude this is actually pretty good man
Doesnβt work on mobile
That wasn't intended to be a complete solution. It was to show you the principle.
I assume it would be possible to create on mobile just more difficult?
Not very difficult. It only requires regular responsive design. It doesn't require any additional obscure tricks.
But you have to choose your sizing carefully. The specific technique of focus-within used in my solution requires that there be enough space outside of the gallery area that the user can touch to dismiss the enlarged image.
I getchu, Honestly I do thank you for your help but I think I'll start learning JS so I can have better creations and make myself look more professional
The normal way to do this is with JS. It is very abnormal and also difficult to do it as pure CSS. I only did it for the fun of solving a puzzle.
Yea makes sense, After some videos and lite research I did it does seem learning JS is the way to go plus it gives me more options for styling that would be even cooler
I could do a design that'll show the user a small version of the img but also display it as the background with arrow keys that go left and right for each img with the background altering