输入检查后CSS选择DIV

Question

我是HTML / CSS的完全入门者，我正在尝试仅使用CSS / HTML制作带有缩略图的图片库。 我想将照片堆叠在具有不透明度“ 0”的div中，并在单击缩略图（输入=选中）后将不透明度更改为“ 1”
坚持了几个星期，我想知道是否有人可以提供帮助 这是我目前无法使用的代码...我将不胜感激

谢谢！

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