0

I am complete beginner to HTML/CSS and I am trying to make an image gallery with thumbnails with CSS/HTML Only. I want to stack photos in a div with opacity "0" and change opacity to "1" once thumbnail is clicked (input= checked)
Been stuck on this for weeks and I was wondering if anyone could help here is my current code which doesn't work... I would appreciate any help

Thanks in advance!

.mainphoto img {
  position: absolute;
  opacity: 0;
}
input[name="selector"]:checked ~ .mainphoto img {
  opacity: 1;
  z-index: 1;
}

        <div class="thumb1">
          <input type="radio" name="selector" id="thumb1" checked="checked">
          <label for="thumb1">
          <img  class="thumb" src="1.jpg" width="100" >
          </label>
          </div> 
        <div class="mainphoto"><img src="1.jpg" width="500"> </div>
Tautvydas Janauskas
  • 1
  • 1
  • This is not a duplicate of that. You don't use a parent selector, you use a form selector called `checked`. She had the wrong elements listed. Should have been type=radio and `+img` – Invariant Change Aug 31 '18 at 15:43
  • The answer: `
    Smiley face Smiley face
    `     – Invariant Change Aug 31 '18 at 15:48
  • 1
    Thanks for the help! It is simmilar to what I am trying to accomplish however it should be slightly different: Large images should be stacked on top of each other see sample (for debugging purposes i've set opacity to "0.2": https://www.w3schools.com/code/tryit.asp?filename=FUTCEAUHNQNR – Tautvydas Janauskas Aug 31 '18 at 16:23
  • I was going to make the answer a lot better, but it got closed, but hopefully, you have all you need now? 2:30am here so I'm off to bed. Let me know if you need more help and I'll see what I can do in the morning. – Invariant Change Aug 31 '18 at 16:26
  • 1
    I'll figure it out! Thanks again for the help :) – Tautvydas Janauskas Aug 31 '18 at 16:49

0 Answers0