Обработка события click на CSS

* { transition: all .5s; }
 
.square-red,
.square-blue {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
 
.square-red { background: red; }
.square-blue { background: blue; }
 
.orange,
.green {
  width: 200px;
  height: 200px;
  opacity: 0;
  position: absolute;
  left: 28px;
}
 
.orange { background: orange; top: 8px; }
.green { background: green; top: 28px; }
 
.square-red:focus ~ .orange,
.square-blue:focus ~ .green { opacity: 1; }