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.

            
              <h2>CSS3 Horizontal Timeline</h2>
<p id="note">Since the flex property only works in Chrome, if your are using other browers please set the $chrome variable to false. <br/> It seems there is a CSS3 transform bug in Safari.</p>
<ul id='timeline'>
  <li class='entry'>
    <input checked='checked' class='radio' id='trigger5' name='trigger' type='radio'>
    <label for='trigger5'>
      <span>
        Lorem ipsum dolor sit amet
      </span>
    </label>
    <span class='date'>16 May 2013</span>
    <span class='circle'></span>
    <div class='content'>
      <h3>Lorem ipsum dolor sit amet (16 May 2013)</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui non ipsam ullam tempore reprehenderit illum temporibus! qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='entry'>
    <input class='radio' id='trigger4' name='trigger' type='radio'>
    <label for='trigger4'>
      <span>
        Lorem ipsum dolor sit amet
      </span>
    </label>
    <span class='date'>15 May 2013</span>
    <span class='circle'></span>
    <div class='content'>
      <h3>Lorem ipsum dolor sit amet (15 May 2013)</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='entry'>
    <input class='radio' id='trigger3' name='trigger' type='radio'>
    <label for='trigger3'>
      <span>
        Lorem ipsum dolor sit amet
      </span>
    </label>
    <span class='date'>14 May 2013</span>
    <span class='circle'></span>
    <div class='content'>
      <h3>Lorem ipsum dolor sit amet (14 May 2013)</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt!
      </p>
    </div>
  </li>
  <li class='entry'>
    <input class='radio' id='trigger2' name='trigger' type='radio'>
    <label for='trigger2'>
      <span>
        Lorem ipsum dolor sit amet
      </span>
    </label>
    <span class='date'>13 May 2013</span>
    <span class='circle'></span>
    <div class='content'>
      <h3>Lorem ipsum dolor sit amet (13 May 2013)</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt!
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
    </div>
  </li>
  <li class='entry'>
    <input class='radio' id='trigger1' name='trigger' type='radio'>
    <label for='trigger1'>
      <span>
        Lorem ipsum dolor sit amet
      </span>
    </label>
    <span class='date'>12 May 2013</span>
    <span class='circle'></span>
    <div class='content'>
      <h3>Lorem ipsum dolor sit amet (12 May 2013)</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt!
      </p>
    </div>
  </li>
</ul>
            
          
!
            
              @import compass

/* -------------------------------------
 * Set to false if you are not using Chrome
 * ------------------------------------- */
$chrome: true

/* -------------------------------------
 * Styles
 * ------------------------------------- */

// Colours
$bg: #3f9cca
$white: #eee9dc
$red: #f98262

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro)

body
  max-width: 1200px
  margin: 50px auto 0
  padding: 0 5%
  font: 16px/1.5 'Source Sans Pro', sans-serif
  color: $white
  background: $bg

h2, #note
  margin: 0
  
#timeline
  margin-top: 480px
  padding: 0
  border-top: 8px solid $white
  list-style: none
  @if $chrome
    display: flex
  li
    padding-top: 30px
    position: relative
    @if $chrome
      flex: 1
      transition: all 0.4s ease-in-out
    @else
      width: 20%
      float: left
    &:hover
      padding-bottom: 80px //for hover effects
      @if $chrome
        flex: 2
      label
        opacity: 1
        transform: translateY(10px)
label
  @if $chrome
    max-width: 200px
  @else
    width: 80%
  margin: 0 auto
  padding: 5px 10px
  border-width: 2px
  border-style: solid
  border-color: $white
  border-radius: 5px
  position: absolute
  left: 0
  right: 0
  cursor: pointer
  opacity: 0
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out
  &:before, &:after
    content: ""
    width: 0
    height: 0
    border: solid transparent
    position: absolute
    bottom: 100%
    pointer-events: none
  &:before
    border-bottom-color: $white
    border-width: 15px
    left: 52%
    margin-left: -15px
  &:after
    border-bottom-color: $bg
    border-width: 12px
    left: 52%
    margin-left: -12px
  span
    text-align: center
    white-space: nowrap
    text-overflow: ellipsis
    overflow: hidden
    display: block

.date
  width: 100%
  padding-bottom: 30px //for hover effects
  text-align: center
  position: absolute
  top: -60px
  display: block
.circle
  width: 10px
  height: 10px
  margin-left: -5px
  background: $bg
  border: 5px solid $white
  border-radius: 50%
  position: absolute
  top: -14px
  left: 50%

.content
  width: 800px
  height: 240px
  margin: 0 auto
  border: 2px solid $white
  border-radius: 8px
  position: fixed
  top: 200px
  left: 0
  right: 0
  z-index: 100
  background: $bg
  transform: perspective(1000px) rotateY(20deg)
  animation: switching_back 0.8s
  h3, p
    margin: 0 20px 10px
    text-align: justify
    opacity: 0
  h3
    margin-top: 20px

.radio
  display: none
.radio:checked
  & + label
    opacity: 1
    transform: translateY(10px)
    transition: opacity 0.4s ease-in-out 0.25s, transform 0.3s ease-in-out 0.25s
  & ~ .circle
    background: $red
  & ~ .content
    z-index: 999
    transform: perspective(1000px) rotateY(15deg) translate(40px,25px)
    animation: switching 1s ease
    h3, p
      opacity: 1
      transition: opacity 0.4s ease-in-out 0.4s

@keyframes switching
  0%
    transform: perspective(1000px) rotateY(20deg)
  40%
    transform: perspective(1000px) rotateY(15deg) translate(100px,35px)
  100%
    transform: perspective(1000px) rotateY(15deg) translate(40px,25px)


@keyframes switching_back
  0%
    transform: perspective(1000px) rotateY(15deg) translate(40px,25px)
    z-index: 200
  40%
    transform: perspective(1000px) rotateY(15deg) translate(0px,0px) scale(1.08)
  100%
    transform: perspective(1000px) rotateY(20deg)
    z-index: 100
            
          
!
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