<div class="feat-cards">
	<ul>
		<li class="cards-items ship-card selected">
			<div class="ship-icon"></div>
			<span>Ship</span>
      <div class="cards-btns-container">
        <div class="cards-dtn"></div>
		  	<div class="cards-dtn"></div>
		  	<div class="cards-dtn"></div>
		  	<div class="cards-dtn"></div>
      </div>

		</li>
		<li class="cards-items stream-card">
			<div class="stream-icon"></div>
			<span>Stream</span>
      <div class="cards-btns-container">
        <div class="cards-dtn"></div>
		  	<div class="cards-dtn"></div>
		  	<div class="cards-dtn"></div>
		  	<div class="cards-dtn"></div>
        <div class="cards-dtn"></div>
      </div>
		</li>
		<li class="cards-items shop-card">
			<div class="shop-icon"></div>
			<span>Shop</span>
      <div class="cards-btns-container">
        <div class="cards-dtn"></div>
		  	<div class="cards-dtn"></div>
		  	<div class="cards-dtn"></div>
		  	<div class="cards-dtn"></div>
      </div>
		</li>
		<li class="cards-items read-card">
			<div class="read-icon"></div>
			<span>Read</span>
      <div class="cards-btns-container">
        <div class="cards-dtn"></div>
		  	<div class="cards-dtn"></div>
      </div>
		</li>
		<li class="cards-items more-card">
			<div class="more-icon"></div>
			<span>More</span>
      <div class="cards-btns-container">
        <div class="cards-dtn"></div>
		  	<div class="cards-dtn"></div>
      </div>
		</li>
	</ul>
</div>

li {
  list-style: none;
  margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	border: 0;
}

.feat-cards ul {
  display: flex;
}

.cards-items {
  width: 150px;
  height: 210px;
  background-color: red;
  margin-right: 1rem;
  position: relative;
}

.cards-items span {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
  bottom: 24px;
  color: #fff;
  font-size: 20px;
  font-weight: 300;
}

.cards-btns-container {
  background-color: transparent;
  display: flex;
  justify-content: center;
  margin-top: 190px;
  position: relative;
}

.cards-dtn {
  background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/marketing/prime/detail_page/Sprites_2x._CB493761273_.png);
  background-size: 158px auto;
  background-position: -22px -232px;
  width: 10px;
  height: 10px;
  margin: 0 2.5px;
  cursor: pointer;
}

.ship-icon {
  background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/marketing/prime/detail_page/InteractivePlane_TILES_SpriteSheet_A._CB513333159_.png), linear-gradient(30deg, #2C88AE 40%, #00A8E1 90%, #00A8E1 48px);
  background-size: 1200px auto, 100% 100%;
  background-position: 0px 0px, 0px 0px;
  background-repeat: no-repeat, repeat;
  width: 100%;
  height: 210px;
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
}

.stream-icon {
    background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/marketing/prime/detail_page/InteractivePlane_TILES_SpriteSheet_B._CB513285352_.png),
        linear-gradient(30deg, #CC0C39 40%, #FF6138 90%, #FF6138 48px);
  background-size: 1200px auto, 100% 100%;
  background-position: 0px 0px, 0px 0px;
  background-repeat: no-repeat, repeat;
  width: 100%;
  height: 210px;
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
}

.shop-icon {
    background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/marketing/prime/detail_page/InteractivePlane_TILES_SpriteSheet_C._CB513285352_.png), linear-gradient(30deg, #A90067 40%, #E31F64 90%, #E31F64 48px);
  background-size: 1200px auto, 100% 100%;
  background-position: 0px 0px, 0px 0px;
  background-repeat: no-repeat, repeat;
  width: 100%;
  height: 210px;
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
}

.read-icon {
    background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/marketing/prime/detail_page/InteractivePlane_TILES_SpriteSheet_D._CB513285353_.png), linear-gradient(30deg, #008577 40%, #36C2B4 90%, #36C2B4 48px);
  background-size: 1200px auto, 100% 100%;
  background-position: 0px 0px, 0px 0px;
  background-repeat: no-repeat, repeat;
  width: 100%;
  height: 210px;
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
}

.more-icon {
      background-image: url(https://images-na.ssl-images-amazon.com/images/G/01/marketing/prime/detail_page/InteractivePlane_TILES_SpriteSheet_E._CB513285352_.png), linear-gradient(30deg, #FF6138 40%, #FFC400 90%, #FFC400 48px);
  background-size: 1200px auto, 100% 100%;
  background-position: 0px 0px, 0px 0px;
  background-repeat: no-repeat, repeat;
  width: 100%;
  height: 210px;
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
}

.cards-items.selected {
  transform: scale(1.3);
  z-index: 999;
  overflow: visible;
  transition: transform 0.25s ease;
}

function removeSelected() {
const cardsItems = document.querySelectorAll(".cards-items");

cardsItems.forEach(function(card) {
  if(card.classList.contains("selected")) card.classList.remove("selected")
})

}

document.addEventListener('click', function (event) {
  const target = event.target.parentElement;
  removeSelected();
	if (target.matches('.cards-items')) {
    target.classList.add("selected")
  }
}, false);