#timeline {
(max-width: 470px)
display:none;
(min-width: 470px) and (max-width: 980px)
display:none;
(min-width: 980px)
display: -webkit-box; display: flex; background-color: rgba(0,0,0,0.5);; }
#timeline:hover .tl-item { width: 33.33%; }
.tl-item { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); position: relative; width: 33.33%; height: 100vh; max-height: 500px; color: #fff; overflow: hidden; -webkit-transition: width 0.5s ease; transition: width 0.5s ease; }
.tl-item:before, .tl-item:after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.tl-item:after { background: rgba(0,0,0, 0.20); opacity: 1; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; }
.tl-item:before { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(75%, black)); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 75%); z-index: 1; opacity: 0; -webkit-transform: translate3d(0, 0, 0) translateY(50%); transform: translate3d(0, 0, 0) translateY(50%); -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease; transition: opacity 0.5s ease, -webkit-transform 0.5s ease; transition: opacity 0.5s ease, transform 0.5s ease; transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease; }
|
.tl-item:hover { width: 38% !important; }
.tl-item:hover:after { opacity: 0; }
.tl-item:hover:before { opacity: 1; -webkit-transform: translate3d(0, 0, 0) translateY(0); transform: translate3d(0, 0, 0) translateY(0); -webkit-transition: opacity 1s ease, -webkit-transform 1s ease 0.25s; transition: opacity 1s ease, -webkit-transform 1s ease 0.25s; transition: opacity 1s ease, transform 1s ease 0.25s; transition: opacity 1s ease, transform 1s ease 0.25s, -webkit-transform 1s ease 0.25s; }
.tl-item:hover .tl-content { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.75s ease 0.5s; transition: all 0.75s ease 0.5s; }
.tl-item:hover .tl-bg { -webkit-filter: grayscale(0); filter: grayscale(0); }
.tl-content { -webkit-transform: translate3d(0, 0, 0) translateY(25px); transform: translate3d(0, 0, 0) translateY(25px); position: relative; z-index: 1; text-align: center; margin: 0 1.618em; top: 55%; opacity: 0; }
|
.tl-content h1 { text-transform: uppercase; color: #1779cf; font-size: 1.44rem; font-weight: normal; }
.tl-year { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 1; }
.tl-year p { font-size: 25px; line-height: 1; background: rgb(0 177 238); padding: 20px 24px; }
.tl-bg { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-position: center center; -webkit-transition: -webkit-filter 0.5s ease; transition: -webkit-filter 0.5s ease; transition: filter 0.5s ease; transition: filter 0.5s ease, -webkit-filter 0.5s ease; }
|