Skip to content

Instantly share code, notes, and snippets.

@Pavracer

Pavracer/Codepen-test.html

Last active June 7, 2021 07:40
Show Gist options
  • Save Pavracer/c574d7640e3ac3fb5f06c7ea9c737521 to your computer and use it in GitHub Desktop.
Save Pavracer/c574d7640e3ac3fb5f06c7ea9c737521 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Codepen-test.html
<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>
<style>
body {
background: #ccc;
}
.timeline-wrapper {
display: block;
width: 90%;
height: 15rem;
position: relative;
color: #fff;
text-align: center;
margin: 0 auto;
}
.timeline-wrapper .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-wrapper .timeline-content-day {
height: 100%;
}
.timeline-wrapper .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;
}
.timeline-wrapper .timeline-content-item > 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;
}
.timeline-wrapper .timeline-content-item > span: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-wrapper .timeline-content-item .timeline-content-item-reveal {
display: none;
position: absolute;
left: 0;
top: 50%;
margin-top: -50%;
width: 100%;
}
.timeline-wrapper .timeline-content-item .timeline-content-item-reveal a {
display: block;
width: 100%;
height: 100%;
}
.timeline-wrapper .timeline-content-item .timeline-content-item-reveal a 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;
}
.timeline-wrapper .timeline-content-item .timeline-content-item-reveal a 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;
}
.timeline-wrapper .timeline-content-item .timeline-content-item-reveal a span:after {
content: "\203A";
margin-left: .3em;
}
.timeline-wrapper .timeline-content-item.active {
width: 10%;
}
.timeline-wrapper .timeline-content-item.active .timeline-content-item-reveal {
display: block;
}
</style>
<script>
(function($){
$( document ).ready(function() {
$(".timeline-wrapper .timeline-content-item > span").on(
"mouseenter mouseleave",
function (e) {
$(".timeline-wrapper .timeline-content-item.active").removeClass("active");
$(this).parent().addClass("active");
}
);
});
})(jQuery);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment