JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<ul>
  <li class="active"><img src="https://placeimg.com/200/200/people?1" alt=""></li>
  <li><img src="https://placeimg.com/200/200/people?2" alt=""></li>
  <li><img src="https://placeimg.com/200/200/people?3" alt=""></li>
  <li><img src="https://placeimg.com/200/200/people?4" alt=""></li>
  <li><img src="https://placeimg.com/200/200/people?5" alt=""></li>
  <li><img src="https://placeimg.com/200/200/people?6" alt=""></li>
  <li><img src="https://placeimg.com/200/200/people?7" alt=""></li>
  <li><img src="https://placeimg.com/200/200/people?8" alt=""></li>
  <li><img src="https://placeimg.com/200/200/people?9" alt=""></li>
  <li><img src="https://placeimg.com/200/200/people?10" alt=""></li>
</ul>

CSS

ul {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  height: 200px;
  line-height: 200px;
  font-size: 0;
}

li {
  position: relative;
  padding: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  list-style: none;
  display: inline-block;
  transition-property: height, width, opacity, padding;
  transition-duration: 1s;
  cursor: pointer;
  vertical-align: bottom;
}

img {
  vertical-align: bottom;
  height: auto;
  width: 100%;
}

li.active {
  width: 200px;
  height: 200px;
  opacity: 1;
  padding-right: 2px;
}

li.active ~ li {
  padding: 0 2px;
  opacity: 1;
  width: 100px;
  height: 200px;
}

JavaScript

let items = document.querySelectorAll("li");
items.forEach(e => e.addEventListener(
	"click",
  _ => {
  	document.querySelector(".active").classList.remove("active"); 	
    e.classList.add("active");
  }
));