Demo for Timeline with Title Effect on Hover

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700);

body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

* {
    box-sizing: border-box;
}

/* Styling */
.timeline {
    margin: 4em auto;
    position: relative;
    max-width: 46em;
    list-style: none;
}

    .timeline:before {
        background-color: black;
        content: " ";
        margin-left: -1px;
        position: absolute;
        top: 0;
        left: 4.5em;
        width: 2px;
        height: 100%;
    }

.timeline-event {
    position: relative;
}

    .timeline-event:hover .timeline-event-icon {
        transform: rotate(220deg);
        transition: all 0.3s ease-in-out 0s;
        background-color: #1f9bcf;
    }

    .timeline-event:hover .timeline-event-thumbnail {
        box-shadow: 0 0 11px rgba(33, 33, 33, 0.2);
        background-color: #1f9bcf;
    }

    .timeline-event:hover .timeline-event-copy h3 {
        animation-name: color_change;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-direction: alternate;
        color: #1f9bcf;
    }

.timeline-event-copy {
    padding: 2em;
    position: relative;
    top: -1.875em;
    left: 4em;
    width: 80%;
}

    .timeline-event-copy h3 {
        font-size: 1.75em;
    }

    .timeline-event-copy h4 {
        font-size: 1.2em;
        margin-bottom: 1.2em;
    }

    .timeline-event-copy strong {
        font-weight: 700;
    }

    .timeline-event-copy p:not(.timeline-event-thumbnail) {
        padding-bottom: 1.2em;
    }

.timeline-event-icon {
    transform: rotate(45deg);
    background-color: black;
    outline: 10px solid white;
    display: block;
    margin: 0.5em 0.5em 0.5em -0.5em;
    position: absolute;
    top: 0.5em;
    left: 2em;
    width: 1em;
    height: 1em;
}

.timeline-event-thumbnail {
    transition: box-shadow 0.5s ease-in 0.1s;
    color: white;
    font-size: 0.75em;
    background-color: black;
    box-shadow: inset 0 0 0 0em #ef795a;
    display: inline-block;
    margin-bottom: 1.2em;
    padding: 0.25em 1em 0.2em 1em;
}

@-webkit-keyframes color_change {
    0% {
        color: black;
    }

    100% {
        color: #1f9bcf;
    }
}
</style>

</head>
<body>
<ul class="timeline">
  <li class="timeline-event">
    <label class="timeline-event-icon"></label>
    <div class="timeline-event-copy">
      <p class="timeline-event-thumbnail">April 2011 - heute</p>
      <h3>Geil,Danke! GmbH</h3>
      <h4>Geschäftsführerin eines Web-Studios</h4>
      <p><strong>Schwerpunkt: Frontend-Entwicklung</strong><br>Entwickeln von anspruchsvollen, animierten, responsive und adaptive Webseiten mit HTML5, SCSS, jQuery; für alle Browser, optimiert für Desktop, Notebook, Smartphones und Tablets (iOS, Android, Windows).</p>
      <p><strong>Projektmanagement mit Scrum</strong><br>Ständiges Verbessern des agilen Entwicklungsprozesses beispielsweise durch Grunt, Yeoman, GIT, JIRA und BrowserStack.</p>
    </div>
  </li>
  <li class="timeline-event">
    <label class="timeline-event-icon"></label>
    <div class="timeline-event-copy">
      <p class="timeline-event-thumbnail">November 2009 - März 2011</p>
      <h3>Freelancer</h3>
      <h4>Designer und Autor</h4>
      <p>Konzeption, Design und Produktion von Digitalen Magazinen mit InDesign, der Adobe Digital Publishing Suite und HTML5. Co-Autorin der Fachbücher "Digitales Publizieren für Tablets" und "Adobe Digital Publishing Suite" erschienen im dpunkt.verlag.</p>
    </div>
  </li>
  <li class="timeline-event">
    <label class="timeline-event-icon"></label>
    <div class="timeline-event-copy">
      <p class="timeline-event-thumbnail">April 2011 - heute</p>
      <h3>konplan gmbh</h3>
      <h4>IT-Consultant</h4>
      <p><strong>Systemarchitektur, Consulting</strong><br>Konzeption und Modellierung von Systemen und APIs für Digital Publishing und Entitlement nach SOA</p>
    </div>
  </li>
</ul><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>

Other Codes

Horizontal Timeline with Event Popups

A horizontal timeline in which the text of each timeline is animated by clicking on that timeline.

Collapsing Timeline with Buttons

Collapsible timeline with buttons and details panel.

Long Timeline with More Button

A vertical timeline that is displayed with fade animation in the initial number, and when we click on the more button, 4 more text and images of timeline . . .

Timeline Animation on Scroll

A vertical timeline for text that when we scroll the text, the timeline moves downwards animated.