Input:checked images gallery issue

HTML-CSS
1

Hi everyone,
I’m currently working on my third responsive web design project, the product landing page. It is taking me considerably more time than the first two ones, but I’m also learning a lot.

I want to add a simple image gallery and, after some research, I found this example (at 3/4 of the page), which works for me. I reworked it a bit and made a pen from it to make sure I understand the logic behind it.

I have an issue, though: I want the radio-buttons to stay on top of the images, so I gave them a z-index of 1, but that is not working as expected. The only button which seems affected by the property is the selected one; the others are covered by the images. You can see the problem on my product landing page if you try to resize it, and probably if you have a smaller screen than mine. The image gallery is at the bottom.
Could anyone point me in the right direction?
The relevant code is at lines 31-63 (HTML) and lines 168-213 (CSS).
Thank you :pray:

2

Hi Marco

The z-index does not work since you don’t have have the input positioned. Although personally, I would not work with z-index but show the radio buttons below the images.

Let me know if you need more info!

Cheers
Tom

3

Hi Tom, thank you!
That was easy, I’m a little embarrassed right now :sweat_smile:. I should have known better.

well, they are below the images, but as their positioning depends on the padding of the #gallery-container div, and I haven’t yet found a way to ‘lock’ them below the responsive image(s), I was going to use the z-index as a precaution. I’m still new to web development, and it’s more than likely that I don’t fully understand this image gallery method.
Anyway, thank you again, you’ve been very helpful

4

Hi @Marco16168

Great that you were able to fix it!

To clarify my comment about showing the radio buttons below the images: what I was thinking of was actually something in the lines of separating the images and the radio buttons in your code. You now have:

<div>
  <label for="glossy-black"></label>
  <input type="radio" id="glossy-black" name="Pal+BT-gallery" class="gallery-img-selector black" value="black">
  <img src="..." class="gallery-img" alt="Pal + BT, black finish">
</div>

<div>
  <label for="glossy-red"></label>
  <input type="radio" id="glossy-red" name="Pal+BT-gallery" class="gallery-img-selector red" value="red">
  <img src="..." class="gallery-img" alt="Pal + BT, blue finish">
</div>

But it may make for easier styling if you could do something like

<div class="images">
  <img src="..." class="gallery-img" alt="Pal + BT, black finish">

  <img src="..." class="gallery-img" alt="Pal + BT, blue finish">
</div>

<div class="controls">
  <label for="glossy-black"></label>
  <input type="radio" id="glossy-black" name="Pal+BT-gallery" class="gallery-img-selector black" value="black">
  <label for="glossy-red"></label>
  <input type="radio" id="glossy-red" name="Pal+BT-gallery" class="gallery-img-selector red" value="red">
</div>

Just thinking out loud here without having done some testing. But that way, you could always have the controls displayed beneath the images. You could likely also do something with media queries to change the behaviour based on the width of the viewport.

Also, while this works I am not 100% if it is OK to use radio buttons in this case. Maybe worth to check Chris Coyier’s solution: https://css-tricks.com/can-get-pretty-far-making-slider-just-html-css/

Cheers
Tom

1 Like
5

Hi @TomDeS,
thanks for clarifying.

Makes sense, I will have to try your suggestion.

Could you explain why? I found this example lurking on MDN web docs so I assumed it was a viable solution, if slightly unorthodox.

Actually, I tried to use it on the first version of my product landing page, but I think it could have a bug? Or, more probably, as I don’t fully understand it, I couldn’t get it to behave as I wanted.
Specifically, when I included it on my page, clicking any of the buttons caused the page to jump at a specific height (I think also the example pen of Chris Coyer has the same issue: you can see it the first time you click any of the buttons - then the bottom of the pen is “moved up”).
Hope is clear enough, I’m not an English mother-tongue!

So, as I couldn’t understand what the problem was, I chose to use the “Checkbox Hack”. I see now that Chris Coyer has a page on this trick too.

1 Like
6

Hi Marco

Using radio buttons for something else than a form does not feel quite right to me. But I haven’t done the research. And MDN is indeed a very respectable source. So may just be a (wrong) feeling :wink:

Good point! I don’t really have a fix without using JavaScript. But that would kind of beat the purpose of this being a CSS-only solution.

Nice find! Although it looks like he has his doubts too:

Some of this stuff crosses the line of what you “should” do with CSS and introduces some questionable semantics. It’s still very fun to play with and cool that it’s possible, but in general, functional behavior should be controlled by JavaScript.

Anyway, if it works for you, then I am happy :wink:

Cheers
Tom

7

I get it. Granted that there are more rightful ways to build image galleries, but as I’m just a beginner in web development, I’d like to stick to what I understand at the moment.

Yes, I’ve read it too. Well, time to start learning JavaScript! :nerd_face:

Cheers Tom, and thanks for your answers

Marco

1 Like