Как создать секцию на три блока с фотографиями и раскрывающимся описанием при наведении курсора | Section into three blocks with photos and a drop-down description when hovering the cursor

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

СКАЧАТЬ

ДЕМО

X

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

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

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

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>

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

JAVASCRIPT КОД:

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 КОД:

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