How do I add Images to vertical timeline layout? - html

Question

I am trying to teach myself how ot build a timeline and add images. I found this on W3. I want to add images left / right of each text-container displaying what is writte in the text.
I experimented around a lot trying to make it work but I dont completely understand. Also there are some parts within this code I dont completely understand yet. It would be helpful I think, if you could break it down into pieces are explain a little on what each code of line does. But my main problem is to add images next to (left or right) the text-containers.
Thank you.
* {
box-sizing: border-box;
}
body {
background-color: #474e5d;
font-family: Helvetica, sans-serif;
}
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.left {
left: 0;
}
.right {
left: 50%;
}
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.right::after {
left: -16px;
}
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
<div class="timeline">
<div class="container left">
<div class="content">
<h2>2017</h2>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2016</h2>
<p>Lorem ipsum..</p>
</div>
</div>
</div>

Answer 1

You can add the image to existing container using <img> tag.
<div class="container left">
<div class="content">
<h2>2017</h2>
<p>Lorem ipsum..</p>
</div>
<img src="https://placehold.it/200x200" /> <!-- image tag inside the container -->
</div>
I added the below additional CSS and used CSS flexbox layout.
/* Newly added CSS begin*/
.container {
display: flex; /*this makes the container flexbox layout*/
}
.container.left .content {
order: 2; /* order changes the content order within container */
margin-left: auto; /* pushes the left content box to extreme left */
}
.container.right .content {
margin-right: auto;
}
.container img {
margin: 0 20px;
}
/* Newly added CSS ends */
Updated code is below:
* {
box-sizing: border-box;
}
body {
background-color: #474e5d;
font-family: Helvetica, sans-serif;
}
/* Newly added CSS begin*/
.container {
display: flex;
}
.container.left .content {
order: 2;
margin-left: auto;
}
.container.right .content {
margin-right: auto;
}
.container img {
margin: 0 20px;
}
/* Newly added CSS ends */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.left {
left: 0;
}
.right {
left: 50%;
}
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.right::after {
left: -16px;
}
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
<div class="timeline">
<div class="container left">
<div class="content">
<h2>2017</h2>
<p>Lorem ipsum..</p>
</div>
<img src="http://placehold.it/200x200" />
</div>
<div class="container right">
<div class="content">
<h2>2016</h2>
<p>Lorem ipsum..</p>
</div>
<img src="http://placehold.it/200x200" />
</div>
</div>
Fiddle
Updated Fiddle with Adjacent images