<div class="intro">
  <h1 class="intro__title">Pure CSS annotated, linear carousel</h1>
  <p class="intro__body">This experimental carousel uses CSS pseudo classes, attribute values and sibling selectors to imitate a dynamic DOM state.</p>
</div>

<div class="carousel">
  <input type="checkbox" class="faux-ui-facia"> 
  <div class="slide" slide="5" annot="This is the fifth slide title. Photo by David Marcu.">
    <img src="https://ununsplash.imgix.net/uploads/141223808515744db9995/3361b5e1?q=75&fm=jpg&w=602" alt="Slide 5">
  </div>
  
  
  <input type="checkbox" class="faux-ui-facia"> 
  <div class="slide" slide="4" annot="This is the fourth slide title. Photo by Ryan Lum.">
    <img src="https://unsplash.imgix.net/photo-1415356838286-df6fd593e8b3?q=75&fm=jpg&w=600" alt="Slide 4">
  </div>

  <input type="checkbox" class="faux-ui-facia"> 
  <div class="slide" slide="3" annot="This is the third slide title. Photo by Tomasz Paciorek.">
    <img src="https://ununsplash.imgix.net/reserve/JaI1BywIT5Or8Jfmci1E_zakopane.jpg?q=75&fm=jpg&w=600"  alt="Slide 3">
  </div>

  <input type="checkbox" class="faux-ui-facia">
  <div class="slide" slide="2" annot="This is the second slide title. Photo by S Charles.">
    <img src="https://ununsplash.imgix.net/uploads/1413387158190559d80f7/6108b580?fit=crop&fm=jpg&q=75&w=600"  alt="Slide 2">
  </div>

  <input type="checkbox" class="faux-ui-facia">

  <div class="slide" slide="1" annot="First slide title. Photo by Forrest Cavale.">
    <img src="https://ununsplash.imgix.net/uploads/1413399939678471ea070/2c0343f7?q=75&fm=jpg&w=601" alt="Slide 1">
  </div>
   
  <div class="counter" count="5"> / 5</div>
 
</div>

* 
  box-sizing: border-box

html, body
  height: 100%
  min-height: 600px

body
  background-color: #222224
  background-image: linear-gradient(#17191f,#252a35)
  height: 100%
  font-family:  'roboto','helvetica neue', arial, sans-serif

.carousel 
  position: relative
  width: 600px
  height: 400px
  overflow: hidden
  margin: 0 auto
  box-shadow: 0 2px 6px rgba(0,0,0,0.3)
  
  &:hover
    .slide:after,
    .counter,
    .slide:before
      opacity: 1

.slide 
  float: right
  position: absolute
  z-index: 1
  width: 600px
  height: 400px
  background-color: #eee
  text-align: center
  transition: opacity 0.4s
  opacity: 1

  &:before
    content: attr(annot)
    display: block
    position: absolute
    left: 20px
    bottom: 20px
    color: rgba(255,255,255,0.9)
    font-size: 14px
    font-weight: 300
    z-index: 12
    opacity: 0
    transition: opacity 0.3s
    text-shadow: 0 0 1px black
  
  &:after
    content: attr(slide)
    display: block
    position: absolute
    bottom: 0
    transition: opacity 0.3s
    width: 100%
    height: 80px
    opacity: 0
    background-image: linear-gradient(transparent, rgba(0,0,0,0.5))
    text-align: left
    text-indent: 549px
    line-height: 101px
    font-size: 13px
    color: rgba(255,255,255,0.9)
    text-shadow: 0 0 1px black

.counter
  position: absolute
  bottom: 20px
  right: 1px
  height: 20px
  width: 60px
  z-index: 2
  text-align: center
  color: #fff
  line-height: 21px
  font-size: 13px
  opacity: 0
  transition: opacity 0.3s

.faux-ui-facia 
  top: 0
  right: 0
  float: right
  position: absolute
  margin-top:0
  z-index: 9
  height: 100%
  width: 100%
  opacity: 0
  cursor: pointer
  
  &:checked 
    z-index: 8
  
    + .slide 
      opacity: 0

    &:nth-child(1):checked
      z-index: 9
    
  &:nth-child(1):checked
    float: left
    z-index: 9
    
    + .slide
        opacity: 1
    
    ~ .faux-ui-facia
      float: left
      z-index: 8

      + .slide
        opacity: 0
      
      &:checked
        z-index: 9

        + .slide
          opacity: 1


/* --- Intro text --- */
.intro
  padding: 80px 0 60px 0
  text-align: center
  color: #fff
  margin: auto
  width: 800px

  .intro__title 
    font-weight: 200
    font-size: 32px
    color: #fff

  .intro__body
    color: #fff
    font-size: 16px
    line-height: 24px
    font-weight: 300
    opacity: 0.48
    padding: 0 160px
    margin: 0

// ¯\_(ツ)_/¯