帮助创建叠加效果

console.clear();
const ul = document.querySelector('ul')
const imgs = ul.querySelectorAll('li');

const sibs = (current) => {
	let prevSibling = current;
	let nextSibling = current;
	const next = [];
	const prev = [];
	
	while(nextSibling.nextElementSibling !== null) {
		nextSibling = nextSibling.nextElementSibling;
		next.push(nextSibling)
	};
	while(prevSibling.previousElementSibling !== null) {
		prevSibling = prevSibling.previousElementSibling;
		prev.push(prevSibling)
	};
	
	for(let item in next) {
		
		let num = (parseInt(item ) + 1)/next.length * 0.9;
		next[next.length - (parseInt(item) + 1)].style.opacity = num;
		
	}
	
	for(let item in prev) {
		let num = (parseInt(item) + 1)/prev.length*0.75;
		prev[prev.length - (parseInt(item) + 1)].style.opacity = num
	}
}
[...imgs].forEach(img => {
	document.documentElement.addEventListener('click', function(e){
		[...imgs].filter(item => {
			if(item !== img) {
				item.classList.remove('active');
				item.style.opacity = '1'
			}
		})
	})
	img.addEventListener('click', function(e){
		e.stopPropagation();
		sibs(img);
		
		[...imgs].filter(item => {
			if(item !== img) {
				item.classList.remove('active');
			} else {
				item.classList.add('active');
				item.style.opacity = '1'
			}
		})
	})
})

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

img {
  max-width: 100%;
  vertical-align: middle;
}

.wrapper {
  width: 600px;
  margin: 30px auto;
}

ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
ul.hoverable li:hover {
  -webkit-transform: translatey(-10%);
          transform: translatey(-10%);
}
ul li {
  width: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: -20px;
  -webkit-transition: .3s;
  transition: .3s;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translatez(0);
          transform: translatez(0);
  -webkit-box-flex: 0;
      -ms-flex: 0 100px;
          flex: 0 100px;
  min-width: 100px;
  max-width: 100px;
}
ul li.active {
  margin: 0 10px 0 30px;
  -webkit-transform: translatey(0);
          transform: translatey(0);
}

<div class="wrapper">
	<ul class="hoverable">
		<li><img src="https://cdn.tourradar.com/s3/team/original/22_qyfcaezY.jpg" alt=""></li>
		<li><img src="https://cdn.tourradar.com/s3/team/original/26_UTZtK9MY.jpg" alt=""></li>
		<li><img src="https://cdn.tourradar.com/s3/team/original/29_r2HPbRjc.jpg" alt=""></li>
		<li><img src="https://cdn.tourradar.com/s3/team/original/47_K7bg36vA.jpg" alt=""></li>
		<li><img src="https://cdn.tourradar.com/s3/team/original/60_ZRwxcmfT.jpg" alt=""></li>
		
	</ul>
</div>

.cs {
	padding: 50px 0 80px;
	background: #fff;
}
.cs h2 {
	text-align: center;
	font-size: 36px;
	line-height: 41px;
	margin-bottom: 60px;
	font-weight: 400;
	margin: 0 0 40px;
}

.cs .t {
	display: inline-block;
	width: 48%;
	line-height: 23px;
	text-align: center;
	vertical-align: middle;

} 
.cs .t .wp:first-child {
	margin-left: 0;
}
.cs .t .wp {
	width: 75px;
	display: inline-block;
	 margin-left: -30px;
	cursor: pointer;
	vertical-align: middle;
}
.cs .t .wp:active {
    margin: 0 40px 0 10px;
    position: relative;
    text-align: center
}
.cs .t .wp:active span {
    display: block;
    font-family: Georgia,Nimbus Roman No9 L,serif;
    width: 100%;
    font-style: italic;
    position: absolute
}
.cs .t a {
    display: block;
    margin-top: 10px
}
.cs .t .wp img {
	width: 100%;
	border-radius: 40px;
	position: relative;
	opacity: 1;
	 -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}
.wp:hover {
    margin-bottom: 20px
}
.cs .t .wp span {
	display: none;
}
.cs .t:last-child {
	text-align: left;
}
.cs .t a {
	display: block;
	margin-top: 10px;
}

<div class="cs">
  <h2>24/7 Customer Support</h2>
  <div class="t">
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/22_qyfcaezY.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/26_UTZtK9MY.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/29_r2HPbRjc.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/47_K7bg36vA.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/56_WuDKKWiZ.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/79_Wq5Fue3t.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/59_MGrdWrHU.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/60_ZRwxcmfT.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/71_nvT8vFjV.jpg">
      <span>Brendan</span>
    </div>
    <div class="wp">
      <img class="lazy" src="https://cdn.tourradar.com/s3/team/original/79_Wq5Fue3t.jpg">
      <span>Brendan</span>
    </div>
  </div>
</div>