Close

4 Panel Timeline

This is an example of a timeline view with four responsive panels designed using HTML and CSS. The panels consist of a background image and will be visible with the mouse hover event. The body has the styles of font-family as 'Source Sans Pro', Helvetica Neue, Helvetica, Arial, sans-serif, font size as 16px and line-height as 1.75. The timeline has the styles of the display as flex, background color as #031625 and the mouse hover has been implemented by adding the styles of width as 23.3333% on the mouse hover. The class of tl-item has the styles of transform as translate3d(0, 0, 0), position as relative, width as 25%, height as 100vh, min-height as 600px, color as #fff, overflow as hidden and transition as width 0.5s ease. To apply the transition effects, the value has been set as translate3d (0, 0, 0). The year is set with the styles of position as absolute, top and left as 50%, transform as translateX(-50%) translateY(-50%) and z-index as 1. Source: https://codepen.io/jeffglenn/pen/KNYoKa

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.