<h1>Simple CSS Image Gallery</h1>
<h4>Responsive interactive image gallery! Click over the image to view the effect!</h4>

<div class="image-gallery">
	
 
      <input id="tab1" type="radio" name="tabs" checked>
      <label for="tab1"><img width="100" height="100" src="https://cdn.pixabay.com/photo/2017/01/02/09/43/chinese-lantern-plant-1946358_960_720.jpg"></label>  
        
      <input id="tab2" type="radio" name="tabs">
      <label for="tab2"><img width="100" height="100" src="https://cdn.pixabay.com/photo/2017/01/09/02/02/valentines-day-1964460_960_720.jpg"></label>  
        
      <input id="tab3" type="radio" name="tabs">
      <label for="tab3"><img width="100" height="100" src="https://cdn.pixabay.com/photo/2017/01/05/14/12/valentines-day-1955239_960_720.jpg"></label>
 
  
      <section id="content1">
        <img src="https://cdn.pixabay.com/photo/2017/01/02/09/43/chinese-lantern-plant-1946358_960_720.jpg">
      </section>  
        
      <section id="content2">
        <img src="https://cdn.pixabay.com/photo/2017/01/09/02/02/valentines-day-1964460_960_720.jpg">
      </section>
        
      <section id="content3">
        <img src="https://cdn.pixabay.com/photo/2017/01/05/14/12/valentines-day-1955239_960_720.jpg">
      </section>
 
    
</div>

body {
  background-color: #74BBFB;
  font-family: arial, helvetica, sans-serif;
}
h1 {
  text-align: center;
  font-family: 'Pacifico', cursive;  
}
h4 {
  text-align: center;
}

.image-gallery {
  	display: flex;
    flex-flow: column wrap;
    height: 600px;
    margin: 0 auto;
    max-width: 800px;
    min-width: 320px;
}
.image-gallery section {
    display: none;
    margin-left: 20px;
    width: 100%;
}
.image-gallery section img{
  height: auto;
    max-width: 100%;
}

.image-gallery input {
  display: none;
}

.image-gallery label {
    border: 1px solid #3194ee;
    margin: 0 0 10px;
    padding: 5px;
    text-align: center;
    width: 20%;
}
.image-gallery label:hover {
  cursor: pointer;
}

.image-gallery label img {
    height: auto;
    width: 100%;
}
.image-gallery input:checked + label {
  border: 1px solid #004481;
  padding: 5px;
}

.image-gallery #tab1:checked ~ #content1,
.image-gallery #tab2:checked ~ #content2,
.image-gallery #tab3:checked ~ #content3 {
  display: block;
}