Секция с фотографиями и раскрывающимся их описанием

Изначально секция рассчитана на три блока, но по аналогии их можно легко увеличить или уменьшить.

Для плавности раскрытия описания фотографии используется коротенький JavaScript.

Пример:

Пример сделан на варианте оформления секции с достопримечательностями города Саратова

Консерватория

Саратовская государственная консерватория имени Л.В. Собинова (СГК) — высшее музыкальное учебное заведение в Саратове, третья по счёту консерватория в России. Основана в 1912 году на базе музыкального училища.

Журавли

Мемориальный комплекс «Журавли» в парке Победы на Соколовой горе г. Саратова — памятник саратовцам, погибшим во время Великой Отечественной войны 1941—1945 годов. Мемориальный комплекс «Журавли», один из символов Саратова.

Цирк

Сара́товский цирк и́мени бра́тьев Ники́тиных — цирк в Саратове, второй стационарный цирк в Европе (после Пензенского). Основан в 1876 году цирковыми предпринимателями и артистами братьями Никитиными. Является федеральным объектом, подчиняющимся Министерству культуры РФ.

HTML:

<section class="card-container">
	<div class="card">
		<div class="face face-1">
			<img src="photo.jpg" alt="" />
			<h3>Заголовок</h3>
		</div>
		<div class="face face-2">
			<p>Текст</p>
		</div>
	</div>
	<div class="card">
		<div class="face face-1">
			<img src="photo.jpg" alt="" />
			<h3>Заголовок</h3>
		</div>
		<div class="face face-2">
			<p>Текст</p>
		</div>
	</div>		
	<div class="card">
		<div class="face face-1">
			<img src="photo.jpg" alt="" />
			<h3>Заголовок</h3>
		</div>
		<div class="face face-2">
			<p>Текст</p>
		</div>
	</div> 	
</section>

<h3>Заголовок</h3>

</div>

<p>Текст</p>

</div>

<h3>Заголовок</h3>

</div>

<p>Текст</p>

</div>

<h3>Заголовок</h3>

</div>

<p>Текст</p>

</div>

</section>

CSS:

.card-container {
    width: 100%;
	position: relative;
    background: url(background.jpg);
	background-size: cover;
	background-position: 50% 50%;
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	align-content: center;	
	height: 500px;
	margin: 20px 0;
}
.card-container:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
.card-container .card {
	margin: -20px 20px;
	width: 300px;
}
.card-container .card .face {
    width: 100%;
	height: 200px;
    transition: 0.5s;
	background: #FFF;
	overflow: hidden;
}
.card-container .card .face-1 {
    position: relative;
    z-index: 2;
    transform: translateY(50px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.card-container .card:hover .face-1 {
    transform: translateY(0);
}
.card-container .card .face-1 img {
	filter: brightness(0.8);
    width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.5s;
}
.card-container .card:hover .face-1 img {
    filter: brightness(1)
}
.card-container .card .face-1 h3 {
    padding: 10px 0;
	margin: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	color: #FFF;
	width: 100%;
    color: #fff;
    text-align: center;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 1px;
}
.card-container .card .face-2 {
    position: relative;
	z-index: 1;
	opacity: 0;
    background: #fff;
    padding: 20px 20px 10px;
    box-sizing: border-box;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    transform: translateY(-100px);
	height: 100px;
	transition: 0.5s;
}
.card-container .card:hover .face-2 {
    transform: translateY(0);
	opacity: 1;
}
.card-container .card:nth-child(1):hover .face-2 {
	height: var(--face_height_1);
}
.card-container .card:nth-child(2):hover .face-2 {
	height: var(--face_height_2);
}
.card-container .card:nth-child(3):hover .face-2 {
	height: var(--face_height_3);
}
.card-container .card .face-2 p {
    margin: 0;
    padding: 0 0 10px;
	font-size: 15px;
	line-height: 1.3;
	font-family: Verdana, sans-serif; 
}
@media screen and (max-width: 696px) {
	.card-container {
		margin: 140px 0;
	}
}

100

101

102

103

104

105

106

.card-container {

width: 100%;

position: relative;

background: url(background.jpg);

background-size: cover;

background-position: 50% 50%;

display: flex;

flex-wrap: wrap;

justify-content: center;

align-items: center;

align-content: center;

height: 500px;

margin: 20px 0;

}

.card-container:after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.5);

}

.card-container .card {

margin: -20px 20px;

width: 300px;

}

.card-container .card .face {

width: 100%;

height: 200px;

transition: 0.5s;

background: #FFF;

overflow: hidden;

}

.card-container .card .face-1 {

position: relative;

z-index: 2;

transform: translateY(50px);

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

.card-container .card:hover .face-1 {

transform: translateY(0);

}

.card-container .card .face-1 img {

filter: brightness(0.8);

width: 100%;

height: 100%;

object-fit: cover;

transition: 0.5s;

}

.card-container .card:hover .face-1 img {

filter: brightness(1)

}

.card-container .card .face-1 h3 {

padding: 10px 0;

margin: 0;

position: absolute;

bottom: 0;

left: 0;

background: rgba(0,0,0,0.5);

color: #FFF;

width: 100%;

color: #fff;

text-align: center;

font-family: 'Roboto', sans-serif;

text-transform: uppercase;

font-size: 18px;

letter-spacing: 1px;

}

.card-container .card .face-2 {

position: relative;

z-index: 1;

opacity: 0;

background: #fff;

padding: 20px 20px 10px;

box-sizing: border-box;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

transform: translateY(-100px);

height: 100px;

transition: 0.5s;

}

.card-container .card:hover .face-2 {

transform: translateY(0);

opacity: 1;

}

.card-container .card:nth-child(1):hover .face-2 {

height: var(--face_height_1);

}

.card-container .card:nth-child(2):hover .face-2 {

height: var(--face_height_2);

}

.card-container .card:nth-child(3):hover .face-2 {

height: var(--face_height_3);

}

.card-container .card .face-2 p {

margin: 0;

padding: 0 0 10px;

font-size: 15px;

line-height: 1.3;

font-family: Verdana, sans-serif;

}

@media screen and (max-width: 696px) {

.card-container {

margin: 140px 0;

}

JS:

let card = document.querySelectorAll(".card"); 
for( let i = 1; i <= card.length; i++ ){ 
	document.documentElement.style.setProperty("--face_height_" + i + "", document.querySelector(".card-container .card:nth-child(" + i + ") .face-2").scrollHeight + "px"); 
}

let card = document.querySelectorAll(".card");

for( let i = 1; i <= card.length; i++ ){

document.documentElement.style.setProperty("--face_height_" + i + "", document.querySelector(".card-container .card:nth-child(" + i + ") .face-2").scrollHeight + "px");

}

Для чего нужен JavaScript

Так как изначально нам неизвестно, сколько точно контента будет в каждом блоке, а плавно трансформировать с точной высоты на неопределенную (100% или auto) нельзя, то можно использовать 4 разных способа:

Задать при ховере всему описанию в контейнере face-2 конкретную высоту.
В этом случае плавность будет такая же, как на примере, но в описании будут пустоты или прокрутка, т.к. высота каждого блока одинаковая.
Задать при ховере каждому описанию в контейнере face-2 разную высоту
Результат будет 1 в 1 как на примере, только придется на глаз вычислять эту самую высоту.
Использовать CSS-свойство max-height, которое будет иметь значение высоты контейнера, а при ховере иметь раз в пять больше.
Решение удобное, но при таком раскрытии может возникать прыжок.
Использовать маленький скрипт, как в этом примере, который определит высоту контейнера с контентом и передаст это значение в CSS для точного перехода между двумя величинами.
При изменении кол-ва блоков, скрипт менять не стоит, нужно будет лишь добавить новый класс. Для четвертого блока он будет таким:

.card-container .card:nth-child(4):hover .face-2 { height: var(--face_height_4); }

1
2
3

.card-container .card:nth-child(4):hover .face-2 {
height: var(--face_height_4);
}

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на мобильном Сгенерировать QR-код для перехода на эту страницу с телефона

Опубликовано: 07.07.2021 / Обновлено: 30.06.2022
Рубрики: Секции
Метки: CSS, JavaScript, Авторское, Фото
6995 просмотров

Смотрите также:

Секция-галерея на GSAP

Блок или секция с меняющимися мышкой фотографиями

Капли воды на CSS

Капли воды для оформления фона блока или секции

Секция с овалом

Овальное разделение текста в секции от фотографии

Добавить комментарий:

Ваш комментарий отправлен!

Валерий: 01.04.2023 в 18:09

А можно ли закруглить края и рамку сделать?

Ответить
Анатолий: 01.04.2023 в 14:19

Классная статья!

Ответить
Дмитрий: 08.07.2021 в 14:05

Круто!
Не будет ли слишком нагло, если помечтать, еще бы добавить решение, когда к фону можно применить parallax, тогда - вообще пушка будет!!!))
В очередной раз респект за Блог и темы, которые поднимаете 😉

Ответить
- Alexander: 09.07.2021 в 09:03
  
  Можно использовать это решение, но у меня в мозиле какое то дергание возникает, в хроме отлично все.
  Результат
  
  Или использовать что то более профессиональное, например:
  parallax.js или simpleParallax
  
  Ответить
  - Дмитрий: 10.07.2021 в 14:40
    
    Уфы!
    Здорово)
    Да, в мозиле прослеживается подергивание.
    Ок. Буду играться - пища для ума здоровская!!!
    Благодарю!
    
    Ответить

Пример:

Консерватория

Журавли

Цирк

HTML:

CSS:

JS:

Для чего нужен JavaScript

Смотрите также:

Добавить комментарий:

Комментарии: