JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <div>
       <span>slide 1</span>
  </div><div>
      <span>slide 2</span>
  </div><div>
       <span>slide 3</span>
  </div><div>
      <span>slide 4</span>
  </div><div>
       <span>slide 5</span>
  </div><div>
       <span>slide 6</span>
  </div><div>
       <span>slide 7</span>
  </div><div>
      <span>slide 8</span>
  </div>   
</header>

CSS

header {
    margin-top: 10px;
    width: 368px;
    display: table;
    background: #ccc;
    overflow: hidden;
}

header > div {
	background-color: #000;
	width: 44px;
	height: 200px;
	position: relative;
	-webkit-transition: width .3s;
	transition: width .3s;
    display: table-cell;
	border: 2px solid #fff;
    overflow: hidden;
}

header > div:hover span {
    left: 5px;
    opacity: 1;
}	

header > div img {
    position: relative;
    left: -240px;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-filter: grayscale(1);
    overflow:hidden;
}

header > div span {
    -webkit-transition: left .3s;
    transition: left .3s;
    position: absolute;
    bottom: 30px;
    color: white;
    left: -70px;
    opacity: 0;
    width: 151px;
    font-family: 'Fugaz One', cursive;
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
    text-shadow: 0px 0px 10px #f1f1f1;
    filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}

header > div:hover {
    width: 151px;
}