<div class="galeria">
  <input type="radio" name="navegacion" id="_1" checked>
  <input type="radio" name="navegacion" id="_2">
  <input type="radio" name="navegacion" id="_3">
  <input type="radio" name="navegacion" id="_4"> 
  <img src="https://img.youtube.com/vi/WmCbRwUfRyU/hqdefault.jpg" width="480" height="360" alt="Galeria CSS 1" />
  <img src="https://img.youtube.com/vi/6LfFsoM5SbQ/hqdefault.jpg" width="480" height="360" alt="Galeria CSS 2"  />
  <img src="https://img.youtube.com/vi/105gRtiv8v4/hqdefault.jpg" width="480" height="360" alt="Galeria CSS 3" />
  <img src="https://img.youtube.com/vi/P7_gyhpV6eM/hqdefault.jpg" width="480" height="360" alt="Galeria CSS 4" />
</div>

* {
  background-color:#333;
}
.galeria {
  height: calc( 360px + 3em);
  width: 480px;
  margin:1em auto;
  border: 1px solid #555;
  position: relative;  
}
.galeria img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 3s;
}
.galeria input[type=radio] {
  position: relative;
  bottom: calc(-360px - 1.5em);
  left: .5em;
}
.galeria input[type=radio]:nth-of-type(1):checked ~ img:nth-of-type(1) {
  opacity: 1;
}
.galeria input[type=radio]:nth-of-type(2):checked ~ img:nth-of-type(2) {
  opacity: 1;
}
.galeria input[type=radio]:nth-of-type(3):checked ~ img:nth-of-type(3) {
  opacity: 1;
}
.galeria input[type=radio]:nth-of-type(4):checked ~ img:nth-of-type(4) {
  opacity: 1;
}