<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.image-slideshow {
width: 600px;
height: 300px;
overflow: hidden;
white-space: nowrap;
font-size: 0;
position: relative;
}
.image-slideshow > div {
width: 600px;
height: 300px;
animation: move 15s ease-in-out 2s infinite alternate;
display:inline-block;
}
.image-slideshow > div div {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
width: 100%;
}
.image-slideshow h2 {
padding: 15px;
margin: 0;
font-size: 18px;
color: #f9f9f9;
}
.image-slideshow p {
padding: 0 15px 15px 15px;
margin: 0;
font-size: 14px;
color: #dddddd;
}
@keyframes move {
0%,30% { transform: translateX(0); }
40%,70% { transform: translateX(-600px); }
80%,100% { transform: translateX(-1200px); }
}
</style>
<div class="image-slideshow">
<div>
<img src="https://via.placeholder.com/600x300" width="600" height="300" alt="">
<div>
<h2>Example Photo 1</h2>
<p>Example description for the photo...</p>
</div>
</div>
<div>
<img src="https://via.placeholder.com/600x300" width="600" height="300" alt="">
<div>
<h2>Example Photo 2</h2>
<p>Example description for the photo...</p>
</div>
</div>
<div>
<img src="https://via.placeholder.com/600x300" width="600" height="300" alt="">
<div>
<h2>Example Photo 3</h2>
<p>Example description for the photo...</p>
</div>
</div>
</div>