Adding text next to slideshow images - html

Question

this is a code I modified it a little bit to make a simple slideshow with images using only HTML and CSS:
(This is a part of the code to see it all please click on demo)
Code:
.slideshow {
width: 800px;
margin: 0 auto;
overflow: hidden;
border: solid 1px white;
}
.slideshow-container {
width: 2500px;
font-size: 0;
transition: 1s ease;
height: 225px;
}
#keyframes slide {
0% {
transform: translateX(0%);
}
12.5% {
transform: translateX(0%);
}
25% {
transform: translateX(-25%);
}
37.5% {
transform: translateX(-25%);
}
50% {
transform: translateX(-50%);
}
62.5% {
transform: translateX(-50%);
}
75% {
transform: translateX(-75%);
}
87.5% {
transform: translateX(-75%);
}
99% {
transform: translateX(-75%);
}
100% {
transform: translateX(0);
}
}
<section class="slideshow">
<div class="slideshow-container slide">
<img src="http://placeimg.com/625/225/any" />
<img src="http://placeimg.com/625/225/animals" />
<img src="http://placeimg.com/625/225/arch" />
</div>
</section>
demo
I want to add a text next to each image, so in the frame I will have half of it image and the other half text.
How can I achieve that?

Answer 1

You will wrap your image and text part into a .item div.
Apply display:flex to parent .slideshow-container to set .item in a row.
Then just apply width:50% to your img and .caption div to align them half of the screen
Also changed your animation animation partition values according to 3 items in a row
Fiddle Link
Stack Snippet
/*general styles*/
body {
padding: 3em;
background-color: #ccc;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/*slideshow styles*/
.slideshow {
width: 800px;
margin: 0 auto;
overflow: hidden;
border: solid 1px white;
}
.item {
display: flex;
width: 800px;
align-items: center;
}
.slideshow-container {
width: 2400px;
transition: 1s ease;
display: flex;
}
.slideshow-container:hover {
animation-play-state: paused;
}
.slide {
animation: slide 24s ease infinite;
}
#keyframes slide {
0% {
transform: translateX(0%);
}
25% {
transform: translateX(0);
}
37.5% {
transform: translateX(-33.333%);
}
62.5% {
transform: translateX(-33.333%);
}
75% {
transform: translateX(-66.667%);
}
99% {
transform: translateX(-66.667%);
}
100% {
transform: translateX(0);
}
}
.item img {
width: 50%
}
.item .caption {
width: 50%
}
<!--hovering over the images will pause the slideshow -->
<section class="slideshow">
<div class="slideshow-container slide">
<div class="item">
<img src="http://placeimg.com/625/225/any" />
<div class="caption">Text</div>
</div>
<div class="item">
<img src="http://placeimg.com/625/225/animals" />
<div class="caption">Text</div>
</div>
<div class="item">
<img src="http://placeimg.com/625/225/arch" />
<div class="caption">Text</div>
</div>
</div>
</section>