0

.cs {
	padding: 50px 0 80px;
}
.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: 50%;
	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;
	cursor: pointer;
	vertical-align: middle;
}
.cs .t .wp img {
	width: 100%;
	border-radius: 40px;
	position: relative;
	opacity: 1;
	transition: opacity .5s ease-in-out;
}
.cs .t .wp span {
	display: none;
} 
<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>

Нужно реализовать эффект наложения так как указано на картинке И чтобы при hover картинка поднималься.Если кому надо вот ресурс где я нашел данный эффект. И если возможно чтобы при клике картинки справа и слева в котором был сделан клик отодвинулись так как показано на картинке . введите сюда описание изображения

2 ответа 2

1

Вот такая реализация:

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>

4
  • рочти угадали @NeedHate но после клика hover не работает у вас
    – Randall
    19 дек 2017 в 13:19
  • за "почти угадал" отдельное спасибо. Изменил ответ, ховер оставил в прежнем состоянии.
    – NeedH8
    19 дек 2017 в 13:28
  • Добавил отдельный клик по документу, который убирает все произошедшие события (т.н., дефолтное состояние).
    – NeedH8
    19 дек 2017 в 13:40
  • спасибо ответ принял
    – Randall
    19 дек 2017 в 13:44
0

.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>

Просто надо было добавить псевдокласс active

.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
}

и все работает.Прошу рабочий пример смотреть только на польный екран.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.