cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console