.timeline_container{ max-width:800px; margin:auto; .timeline_line{ min-height:200px; border-left:4px solid rgba(88,88,88,1); margin-left:220px; padding-top:10px; } .timeline_block{ position:relative; margin-bottom:40px; .tm_date{ position:absolute; left:-77px; top:-1px; width:50px; text-align:right; } .tm_point{ top:5px; width:12px; height:12px; border:4px solid rgba(251,163,58,1); background:white; border-radius:50%; position:absolute; left:-12px; top:0; } .tm_content{ margin-bottom:40px; position:relative; top:-10px; ul{ padding:0; } li{ margin-left:40px; //max-width:700px; position:relative; box-shadow:0 0 20px rgba(0,0,0,0.1); padding-bottom:10px ; background:rgba(250,250,250,1); border-bottom:4px solid rgba(230,230,230,1); border-left:4px solid rgba(230,230,230,1); border-radius:5px; list-style:none; margin-bottom:20px; &:before{ content: ''; position: absolute; border: 11px solid transparent; top: 10px; left: auto; right: 100%; border-color: transparent; border-right-color: rgba(230,230,230,1); } .inner{ top:0; } .images{ img.small{ width:190px; margin:10px; position:absolute; top:0px; left:-270px; &.first{ top:30px; } } &:hover{ img.large{ display:block; } } img.large{ position:absolute; display:none; top:-1%; left:-1%; width:102%; max-width:102%; z-index:2; }} p{ margin:auto; max-width:380px; } p:first-child{ margin-top:0; padding-top:16px; } } } } }