<div class="options">
   <div class="option active">
      <div class="shadow"></div>
      <div class="background" style="background: url(https://source.unsplash.com/580x400?0)"></div>
      <div class="label">
         <div class="icon" style="background: #006466">
            <i class="fas fa-archive"></i>
         </div>
         <div class="info">
            <div class="main">vulputate dignissim</div>
            <div class="sub">tincidunt tortor aliquam nulla facilisi</div>
         </div>
      </div>
   </div>
   <div class="option">
      <div class="shadow"></div>
      <div class="background" style="background: url(https://source.unsplash.com/580x400?1)"></div>
      <div class="label">
         <div class="icon" style="background: #065a60">
            <i class="fas fa-browser"></i>
         </div>
         <div class="info">
            <div class="main">nullam eget</div>
            <div class="sub">massa tincidunt nunc pulvinar sapien</div>
         </div>
      </div>
   </div>
   <div class="option">
      <div class="shadow"></div>
      <div class="background" style="background: url(https://source.unsplash.com/580x400?2)"></div>
      <div class="label">
         <div class="icon" style="background: #0b525b">
            <i class="fas fa-bug"></i>
         </div>
         <div class="info">
            <div class="main">velit laoreet</div>
            <div class="sub">iaculis urna id volutpat lacus</div>
         </div>
      </div>
   </div>
   <div class="option">
      <div class="shadow"></div>
      <div class="background" style="background: url(https://source.unsplash.com/580x400?3)"></div>
      <div class="label">
         <div class="icon" style="background: #144552">
            <i class="fas fa-coffee"></i>
         </div>
         <div class="info">
            <div class="main">nibh venenatis</div>
            <div class="sub">tristique risus nec feugiat in</div>
         </div>
      </div>
   </div>
   <div class="option">
      <div class="shadow"></div>
      <div class="background" style="background: url(https://source.unsplash.com/580x400?4)"></div>
      <div class="label">
         <div class="icon" style="background: #1b3a4b">
            <i class="fas fa-file"></i>
         </div>
         <div class="info">
            <div class="main">dapibus ultrices</div>
            <div class="sub">urna neque viverra justo nec</div>
         </div>
      </div>
   </div>
   <div class="option">
      <div class="shadow"></div>
      <div class="background" style="background: url(https://source.unsplash.com/580x400?5)"></div>
      <div class="label">
         <div class="icon" style="background: #212f45">
            <i class="fas fa-microchip"></i>
         </div>
         <div class="info">
            <div class="main">orci ac</div>
            <div class="sub">posuere lorem ipsum dolor sit</div>
         </div>
      </div>
   </div>
   <div class="option">
      <div class="shadow"></div>
      <div class="background" style="background: url(https://source.unsplash.com/580x400?6)"></div>
      <div class="label">
         <div class="icon" style="background: #272640">
            <i class="fas fa-window"></i>
         </div>
         <div class="info">
            <div class="main">turpis massa</div>
            <div class="sub">elit eget gravida cum sociis</div>
         </div>
      </div>
   </div>
   <div class="option">
      <div class="shadow"></div>
      <div class="background" style="background: url(https://source.unsplash.com/580x400?7)"></div>
      <div class="label">
         <div class="icon" style="background: #312244">
            <i class="fas fa-user-secret"></i>
         </div>
         <div class="info">
            <div class="main">id volutpat</div>
            <div class="sub">blandit cursus risus at ultrices</div>
         </div>
      </div>
   </div>
   <div class="option">
      <div class="shadow"></div>
      <div class="background" style="background: url(https://source.unsplash.com/580x400?8)"></div>
      <div class="label">
         <div class="icon" style="background: #3e1f47">
            <i class="fas fa-shield"></i>
         </div>
         <div class="info">
            <div class="main">dies irea</div>
            <div class="sub">tristique viverra dolor eget</div>
         </div>
      </div>
   </div>
   <div class="option">
      <div class="shadow"></div>
      <div class="background" style="background: url(https://source.unsplash.com/580x400?9)"></div>
      <div class="label">
         <div class="icon" style="background: #4d194d">
            <i class="fas fa-fire-extinguisher"></i>
         </div>
         <div class="info">
            <div class="main">venenatis ac</div>
            <div class="sub">urna justo sociis at</div>
         </div>
      </div>
   </div>
</div>

@import url(https://pro.fontawesome.com/releases/v5.11.2/css/all.css);

body {
	background: #111;
}

.options {
	display: flex;
	justify-content: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.option {
	position: relative;
	width: 50px;
	height: 400px;
	margin: 10px;
	border-radius: 25px;
	overflow: hidden;
	transition: width 200ms linear;

	.background {
		width: 100%;
		height: 100%;
		background-position: center;
		transition: filter 200ms linear;
		filter: blur(8px);
	}

	.label {
		position: absolute;
		left: 5px;
		bottom: 5px;
		width: calc(100% - 10px);
		transition: background-color 100ms linear;
		border-radius: 25px;
	}

	.icon {
		position: absolute;
		bottom: 13px;
		left: 20px;
		transform: translate(-50%, -50%);
		width: 30px;
		height: 30px;
		border-radius: 15px;
		text-align: center;
		color: #ffffff;
		transition:
			transform 200ms linear,
			bottom 200ms linear;

		i {
			font-size: 15px;
			line-height: 30px;
		}
	}

	.info {
		margin: 20px 0 20px 75px;
		transition: opacity 100ms linear;
		opacity: 0;
	}

	.main {
		font-size: 18px;
		font-weight: bold;
	}

	.sub {
		font-size: 14px;
	}
}

.option.active {
	width: 580px;

	.background {
		filter: none;
	}

	.label {
		background-color: rgba(255, 255, 255, 0.6);
		transition: background-color 100ms linear 100ms;
	}

	.icon {
		transform: scale(1.5);
		bottom: 28px;
	}

	.info {
		transition: opacity 100ms linear 100ms;
		opacity: 1;
	}
}

	const options = document.querySelectorAll('.option');

	options.forEach(element => {
		element.addEventListener('click', event => {
			options.forEach(el => el.classList.remove('active'));
			event.target.closest('.option').classList.add('active');
		})
	});