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: 800px;
	overflow: hidden;
	height: 500px;
}

header div {
	background-color: #000;
	width: 43.8px;
	height: 200px;
	position: relative;
	float: left;
	-webkit-transition: width .3s;
	transition: width .3s;
	overflow: hidden;
	  -webkit-animation-timing-function:  linear;
	  -webkit-animation-iteration-count: 1;
	  -webkit-animation-fill-mode: forwards;
	margin-right: 2px;
}

header div:first-child {
		margin-left: 0px;
	}
	
	header div:last-child{
		margin-right: 0px;
	}
	
		header div:hover span {
			left: 50px;
			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: -350px;
		opacity: 0;
		width: 450px;
		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:hover > div {
			width: 43.8px;
		}
		
		header:hover > div:hover {
			width: 150px;
		}