div {
font-family: Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
.timeline {
width: 400px;
}
.timeline .timeline-item {
width: 100%;
}
.timeline .timeline-item .info,
.timeline .timeline-item .year {
color: #eee;
display: block;
float: left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.timeline .timeline-item.close .info,
.timeline .timeline-item.close .year {
color: #ccc;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.timeline .timeline-item .year {
font-size: 24px;
font-weight: bold;
width: 22%;
}
.timeline .timeline-item .info {
width: 100%;
width: 78%;
margin-left: -2px;
padding: 0 0 40px 35px;
border-left: 4px solid #aaa;
font-size: 14px;
line-height: 20px;
}
.timeline .timeline-item .marker {
background-color: #fff;
border: 4px solid #aaa;
height: 20px;
width: 20px;
border-radius: 100px;
display: block;
float: right;
margin-right: -14px;
z-index: 2000;
position: relative;
}
.timeline .timeline-item.active .info,
.timeline .timeline-item:hover .info {
color: #444;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.timeline .timeline-item.active .year,
.timeline .timeline-item:hover .year {
color: #9DB668;
}
.timeline .timeline-item .marker .dot {
background-color: white;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
display: block;
border: 4px solid white;
height: 12px;
width: 12px;
border-radius: 100px;
float: right;
z-index: 2000;
position: relative;
}
.timeline .timeline-item.active .marker .dot,
.timeline .timeline-item:hover .marker .dot {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background-color: #9DB668;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
}
$(".timeline-item").hover(function() {
$(".timeline-item").removeClass("active");
$(this).toggleClass("active");
$(this).prev(".timeline-item").toggleClass("close");
$(this).next(".timeline-item").toggleClass("close");
});
Testing: hyper giants
hyper giants
<![if !vml]>
<![endif]>
$(".timeline-item").hover(function() {
$(".timeline-item").removeClass("active");
$(this).toggleClass("active");
$(this).prev(".timeline-item").toggleClass("close");
$(this).next(".timeline-item").toggleClass("close");
});
No comments:
Post a Comment