CodePen Embed - Animated circle timeline


<div class="timeline-wrapper clearfix">
    <div class="timeline-content-day">
        <div class="timeline-line"></div>
        <div class="timeline-content-item active" data-timeline="hour-8">
            <span>8 AM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-9">
            <span>9 AM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-10">
            <span>10 AM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-11">
            <span>11 AM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-12">
            <span>12 PM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-13">
            <span>1 PM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-14">
            <span>2 PM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-15">
            <span>3 PM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-16">
            <span>4 PM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-17">
            <span>5 PM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-18">
            <span>6 PM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-19">
            <span>7 PM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-20">
            <span>8 PM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-21">
            <span>9 PM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-22">
            <span>10 PM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>

        <div class="timeline-content-item" data-timeline="hour-23">
            <span>11 PM</span>
            <div class="timeline-content-item-reveal">
                <a href="#">
                    <img src="https://picsum.photos/g/300/300">
                    <span>Lorem Ipsum</span>
                </a>
            </div>
        </div>
    </div>
</div>

@import "compass/css3";

body {
  background: #ccc;
}
  
.timeline-wrapper {
  display: block;
  width: 90%;
  height: 15rem;
  position: relative;
  color: #fff;
  text-align: center;
  margin: 0 auto;
    
  .timeline-line {
    display: block;
    width: 93.9%;
    height: 1px;
    background: white;
    position: absolute;
    top: 50%;
    -webkit-box-shadow: 0 0 1px black;
    -moz-box-shadow: 0 0 1px black;
    box-shadow: 0 0 1px black;
    left: 3%;
    margin-left: 2.5px;
  }
  
  .timeline-content-day {
    height: 100%;
  }
    
  .timeline-content-item {
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
    width: 6%;
    display: inline-block;
    position: relative;
    height: 100%;
    margin-right: -5px;
    -webkit-transition: width .5s;
    -moz-transition: width .5s;
    -o-transition: width .5s;
    transition: width .5s;
    z-index: 1;

    > span {
      height: 2rem;
      display: block;
      font-weight: bold;
      position: absolute;
      top: 50%;
      margin-top: -.25em;
      width: 100%;
      text-shadow: 0 0 2px black;
      cursor: pointer;
      
      &:before {
        content: " ";
        display: block;
        width: .5em;
        height: .5em;
        background: white;
        margin: 0 auto .5em auto;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        -webkit-box-shadow: 0 0 1px black;
        -moz-box-shadow: 0 0 1px black;
        box-shadow: 0 0 1px black;
      }
    }

    .timeline-content-item-reveal {
      display: none;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -50%;
      width: 100%;
      
      a {
        display: block;
        width: 100%;
        height: 100%;
        
        img {
          -moz-border-radius: 50%;
          -webkit-border-radius: 50%;
          border-radius: 50%;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          max-height: 100%;
          max-width: 100%;
          border: 3px solid white;
          -webkit-box-shadow: 0 0 2px black;
          -moz-box-shadow: 0 0 2px black;
          box-shadow: 0 0 2px black;
        }
        
        span {
          position: absolute;
          width: 250%;
          margin-left: -75%;
          bottom: -2rem;
          left: 0;
          font-family: serif;
          font-size: 1.3em;
          font-style: italic;
          text-decoration: none;
          white-space: nowrap;
          color: white;
          text-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 0 1px black;
          &:after {
            content: "\203A";
            margin-left: .3em;
          }
        }
      }
      
      
    }
    
    
    
    &.active {
      width: 10%;
      .timeline-content-item-reveal {
        display: block;
      }
    }
  }
}

View Compiled

$(".timeline-wrapper .timeline-content-item > span").on("mouseenter mouseleave", function(e){
  $(".timeline-wrapper .timeline-content-item.active").removeClass("active");
  $(this).parent().addClass("active");
});

This Pen is owned by Jen Huang on CodePen.

See more by @jen-huang on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js