-A Simple Image Gallery Enhanced with CSS3 (using :target pseudo-class)

using :target pseudo-class

by Konstantin Rouda

HTML

<!--A Simple Image Gallery Enhanced with CSS3-->
  <section class="gallery">
  
    <aside class="gallery__thumbnails">
        
    <a href="#green-leaf">
      <img src="http://farm4.static.flickr.com/3007/4595559479_ed216077fb.jpg" class="thumbnail" />
      </a>
    
    <a href="#red-leaf">
      <img src="http://cfile25.uf.tistory.com/image/1336574D509C932C1F3F28" class="thumbnail" />
      </a>
    
    <a href="#waterfall">
      <img src="https://c1.staticflickr.com/3/2791/4137841698_699063c70e_b.jpg" class="thumbnail" />
      </a>
      
    </aside>
    
    <div class="gallery__display">
      
      <img src="http://farm4.static.flickr.com/3007/4595559479_ed216077fb.jpg" class="slide" id="green-leaf" />
      <img src="http://cfile25.uf.tistory.com/image/1336574D509C932C1F3F28" class="slide" id="red-leaf" />
      <img src="https://c1.staticflickr.com/3/2791/4137841698_699063c70e_b.jpg" class="slide" id="waterfall" />
      
    </div>
  
  </section>

CSS

HTML {
  font-family: "Open Sans", sans-serif;
  font-size: 100%;
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  color: #3a3d40;
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}


/*---ACTUAL STYLE---*/

/*A Simple Image Gallery Enhanced with CSS3*/

IMG {
  max-width: 100%;
}

.gallery {
  display: flex;
  max-width: 1200px;
  min-height: 750px;
  margin: 1em auto 0;
  border: 2px solid blue;
}

.gallery__thumbnails {
  flex: 0 0 20%;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: space-around;
  background: red;
}

.thumbnail {
  width: 200px; height: 200px;
}

.gallery__display {
  position: relative;
  min-height: 100%;
  flex: 1 1 60%;
  background: yellow;
}


.slide {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  max-width: 800px;
  opacity: 0;
  transition: opacity .8s ease-in;
}

.slide:target {
  opacity: 1;
}