0

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

/* Team */

.team {
	margin-bottom: 100px;
}

.team__inner {
	text-align: center;
}

.team__title {
	font-size: 1.2rem;
	font-weight: 600;
	color: #12C2E9;
	
	margin-bottom: 11.2px;
}

.team__suptitle {
	font-size: 2rem;
	color: #fff;
	font-weight: 700;
}

.team__suptitle:after {
	content: "";
    display: block;
    width: 60px;
    height: 3px;
    margin: 50px auto;

    background: linear-gradient(to right, #E100FF, #F80759);
}

.team__team {
	display: flex;
	justify-content: center;
}

.team__item {
	position: relative;
	
	margin-left: 20px;
}

.team__item:hover .team__photo-about {
	display: block;
}

.team__item:first-child {
	margin-left: 0;
}

.team__photo {
	max-width: 100%;
}

.team__photo-about {
	display: none;
	
	margin-bottom: 22px;
	
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
}

.team__name {
	font-size: 1.2rem;
	font-weight: 600;
	color: #fff;
}

.team__prof {
	font-size: 0.8rem;
	color: #12C2E9;
}
<div class="team">
	<div class="container">
		<div class="team__inner">
			<h2 class="team__title">Meet</h2>
			<h1 class="team__suptitle">OUR TRAINERS</h1>
			
			<div class="team__team">
			
				<div class="team__item">
				
					<div class="team__photo">
						<img src="images/Team/Trainer%201.jpg" alt="">
					</div>
					
					<div class="team__photo-about">
						<h1 class="team__name">Letty Adams</h1>
						<h2 class="team__prof">Fitness Trainer</h2>
					</div>
					
				</div>

				<div class="team__item">
				
					<div class="team__photo">
						<img src="images/Team/Trainer%202.jpg" alt="">
					</div>
					
					<div class="team__photo-about">
						<h1 class="team__name">Letty Adams</h1>
						<h2 class="team__prof">Fitness Trainer</h2>
					</div>
					
				</div>

				<div class="team__item">
				
					<div class="team__photo">
						<img src="images/Team/Trainer%203.jpg" alt="">
					</div>
					
					<div class="team__photo-about">
						<h1 class="team__name">Letty Adams</h1>
						<h2 class="team__prof">Fitness Trainer</h2>
					</div>
					
				</div>

				<div class="team__item">
				
					<div class="team__photo">
						<img src="images/Team/Trainer%204.jpg" alt="">
					</div>
					
					<div class="team__photo-about">
						<h1 class="team__name">Letty Adams</h1>
						<h2 class="team__prof">Fitness Trainer</h2>
					</div>
					
				</div>

				<div class="team__item">
				
					<div class="team__photo">
						<img src="images/Team/Trainer%205.jpg" alt="">
					</div>
					
					<div class="team__photo-about">
						<h1 class="team__name">Letty Adams</h1>
						<h2 class="team__prof">Fitness Trainer</h2>
					</div>
					
				</div>
			</div> <!-- ./team__team -->
			
		</div> <!-- ./team__inner -->
	</div> <!-- ./container -->
</div> <!-- ./team -->

введите сюда описание изображения

Блок вылезает за контейнер, как это исправить? После слов Learn More блок team выходит за контейнер.

5
  • Предполагаю, что размер контейнера равен верхнему, там где заканчивается learn more?
    – Denis640Kb
    21 дек 2019 в 22:18
  • Denis640Kb, да. 21 дек 2019 в 22:23
  • для картинок max-width: 100%.
    – Seredniy
    21 дек 2019 в 22:28
  • Serednity, ничего не изменилось 21 дек 2019 в 22:35
  • @CreatorGod выложите, пожалуйста, код. Вы уверены, что оба блока находятся в одном контейнере?
    – Denis640Kb
    21 дек 2019 в 22:43

1 ответ 1

0

А у вас точно размер контейнер с картинками такой же как и у блока вверху? Сюдя по скрину он больше. У вас блок с картинками отцентрирован. Если бы размер был такой же то левая картинка была бы на уровне 'learn more', а справа вылазила б.

Затемнение блока при ховере:

.block {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
}

.block:after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  z-index: 1;
  opacity: 0;
  background: #000;
  transition: opacity 0.3s;
  top: 0;
  left: 0;
}

.block:hover:after {
  opacity: 0.5;
}
<div class="block"></div>

1
  • спасибо, затемнение фона сработало. да, блок выше был меньше, а нижний был нужной длины. спасибо. 21 дек 2019 в 23:10

Ваш ответ

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

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