<div class="wrapper">
<div class="slide first"><p>one</p>hello</div>
<div class="slide second"><p>two</p>some</div>
<div class="slide third"><p>three</p>weird</div>
<div class="slide fourth"><p>four</p>thumb</div>
<div class="slide fifth"><p>five</p>slider</div>
</div>

body{
  font-size: 5mm;
  background: #cc5;
}
.wrapper{
  width: 90mm;
  margin: 1mm auto;
  padding: 25mm 0 0;
  overflow-x: hidden;
  white-space: nowrap;
  background: rgba(255,255,255,0.2);
}
.slide{
  display: inline-block;
  width: 35mm;
  height: 25mm;
  margin: 1mm;
  padding: 2mm;
  background: #dd6;
  transition: all 0.4s ease-in;
  background-size: cover;
  background-position: center center;
  text-shadow: 0 0 1mm #fff;
  overflow: hidden;
}
.slide.top{
  height: 50mm;
  margin: -24.5mm 1mm 1mm;
}
.slide p{
  transition: all 0.4s ease-in;
  height: 0;
  margin: 0;
  padding: 1mm 2mm;
  transform: translate( 0, 50mm );
  background: rgba(0,0,0,0.5);
  color: #fff;
}
.slide.top p{
  height: 2em;
  transform: translate( 0, 0 );
}



.slide.first{ background-image: url(https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80) }

.slide.second{ background-image: url(https://images.unsplash.com/photo-1476357471311-43c0db9fb2b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80) }

.slide.third{ background-image: url(https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1002&q=80) }

.slide.fourth{ background-image: url(https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80) }

.slide.fifth{ background-image: url(https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80) }

( function sliding( s, i, p ) {
  p?.classList.remove( 'top' );
  const pad = -( 31 * i - 2 ) + 'mm';
  s[ i ].classList.add( 'top' );
  s[ 0 ].style.marginLeft = pad;
  setTimeout( sliding, 800, s, ( i + 1 ) % s.length, s[ i ] );
} ) ( document.querySelectorAll( '.wrapper .slide' ), 0 );