Как я могу избежать абсолютного позиционирования скрытого элемента, чтобы перекрывать другие элементы при раскрытии?

Question

Я ищу css правило относительно элементов с абсолютным позиционированием .

Это мой сценарий:

У меня есть 6 изображения, каждое из которых должно показывать скрытый div при нажатии.

Мои вопросы следующие:

1-Как сделать скрытый div в абсолютном положении pu sh элементы ниже вместо того, чтобы перекрывать их?

2-Как сделать так, чтобы стрелка над скрытым элементом div всегда была в центре изображения выше?

$('.img').on('click', function() {

    $('.reveal').removeClass('slideDown');
    $(this).next().addClass('slideDown');
})
$('.close').on('click', function() {
    $(this).closest('.reveal').removeClass('slideDown');
})

.flex-container {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 1em;
}

@media (min-width: 540px) {
    .flex-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .flex-container {
        max-width: 768px;
    }
}

@media (min-width: 992px) {
    .flex-container {
        max-width: 992px;
    }
}

@media (min-width: 1200px) {
    .flex-container {
        max-width: 1200px;
    }
}

.flex-row {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1em;
}

.flex-col-xs-4,
.flex-col-sm-4,
.flex-col-md-4,
.flex-col-lg-4 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1em;
    width: 100%;
}

@media (min-width: 540px) {
    .flex-col-xs-4 {
        max-width: calc(100% * (4 / 12));
        width: calc(100% * (4 / 12));
    }
}

@media (min-width: 768px) {
    .flex-col-sm-4 {
        max-width: calc(100% * (4 / 12));
        width: calc(100% * (4 / 12));
    }
}

@media (min-width: 992px) {
    .flex-col-md-4 {
        max-width: calc(100% * (4 / 12));
        width: calc(100% * (4 / 12));
    }
}

@media (min-width: 1200px) {
    .flex-col-lg-4 {
        max-width: calc(100% * (4 / 12));
        width: calc(100% * (4 / 12));
    }
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-wrapper {}

.close {
    color: #ffffff!important;
    float: right;
    font-size: 35px;
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    top: 30px;
    right: 30px;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

img {
    border: 0;
    max-width: 300px;
}

.reveal-container {
    position: relative;
}

.reveal-video-wrapper {
    max-width: 540px;
    width: 100%;
}

.reveal {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background: #ddd;
    top: auto;
    left: 0;
    width: 100%;
    margin-top: 20px;
    text-align: left;
    max-height: 0;
    overflow: hidden;
    padding: 100px;
}

.reveal::before {
    top: 6px;
    width: 0;
    height: 0;
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    border-bottom: 20px solid #ddd;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 15px;
    left: 25%;
    margin: -20px 0 0 -15px;
}

.reveal.slideDown {
    visibility: visible;
    opacity: 1;
    max-height: 677px;
    overflow: visible;
}

.reveal-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article>
    <div class="flex-container">
        <div class="flex-row">

            <div class="flex-col-md-4"><img class="img" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                <div class="reveal">
                    <!-- Modal content -->
                    <a class="close">&times;</a>
                    <div class="reveal-content">

                        <div class="reveal-video-wrapper flex-col-md-8">
                            <div class="video-container">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/DrBy7MyiqJU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="infos flex-col-md-4">
                            <h3>Title</h3>
                            <div class="reveal-text">
                                Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="flex-col-md-4"><img class="img" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                <div class="reveal">
                    <!-- Modal content -->
                    <a class="close">&times;</a>
                    <div class="reveal-content">

                        <div class="reveal-video-wrapper flex-col-md-8">
                            <div class="video-container">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/YkkezwcBZLQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="infos flex-col-md-4">
                            <h3>Title</h3>
                            <div class="reveal-text">
                                Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="flex-col-md-4"><img class="img" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                <div class="reveal">
                    <!-- Modal content -->
                    <a class="close">&times;</a>
                    <div class="reveal-content">

                        <div class="reveal-video-wrapper flex-col-md-8">
                            <div class="video-container">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/fR2q_Xe7kqA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="infos flex-col-md-4">
                            <h3>Title</h3>
                            <div class="reveal-text">
                                Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="flex-col-md-4"><img class="img" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                <div class="reveal">
                    <!-- Modal content -->
                    <a class="close">&times;</a>
                    <div class="reveal-content">

                        <div class="reveal-video-wrapper flex-col-md-8">
                            <div class="video-container">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="infos flex-col-md-4">
                            <h3>Title</h3>
                            <div class="reveal-text">
                                Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="flex-col-md-4"><img class="img" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                <div class="reveal">
                    <!-- Modal content -->
                    <a class="close">&times;</a>
                    <div class="reveal-content">

                        <div class="reveal-video-wrapper flex-col-md-8">
                            <div class="video-container">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/iaAgm4lO3tw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                        <div class="infos flex-col-md-4">
                            <h3>Title</h3>
                            <div class="reveal-text">
                                Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="flex-col-md-4"><img class="img" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
                <div class="reveal">
                    <!-- Modal content -->
                    <a class="close">&times;</a>
                    <div class="reveal-content">

                        <div class="reveal-video-wrapper flex-col-md-8">
                            <div class="video-container">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/fR2q_Xe7kqA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

</article>

Answer 1

Как обсуждалось в комментариях, быстрое решение для сохранения абсолютно позиционированного наложения заключается в том, чтобы воздействовать на высоту строки выбранного элемента.

Ваши HTML и CSS отчасти разбиты и чрезмерно сложны , Я сделал упрощенный пример, используя маржинальную анимацию, чтобы исправить вашу проблему. Конечно, вы можете настроить анимацию, используя задержки, чтобы сделать переходы более плавными.

function close() {
    $('.row').removeClass('is-expanded')
        .find('li[aria-expanded="true"]').attr('aria-expanded', false);
}

$('input[type="image"]').on('click', function() {

    close();
    $(this).parent().attr('aria-expanded', true)
        .parents('.row').addClass('is-expanded');
});

$('.close').on('click', close);

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.row {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.row li {
    width: 23%;
    margin-bottom: 10px;
    transition: margin .5s ease-in;
}


input {
    display: block;
    width: 100%;
}

article {
    position: absolute;
    overflow: hidden;
    height: 0;
    left: 0;
    bottom: 20px;
    transition: height .5s ease-in;
    background: grey;
    display: flex;
    align-items: center;
}

article > button {
    background: transparent;
    position: absolute;
    top: 20px;
    right: 20px;
    outline: 0;
}

article iframe {
    float: left;
    margin: 20px;
}

li[aria-expanded="true"] {
    margin-bottom: 180px;
}

li[aria-expanded="true"] article {
   height: 140px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>
        <ul class="row">
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum A</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum B</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum C</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum D</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
        </ul>
    </li>
    <li>
        <ul class="row">
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum E</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum F</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum G</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
            <li>
                <input type="image" src="https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
                <article>
                    <button class="close">X</button>
                    <iframe width="200" height="100" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div>
                        <h3>Lorem ipsum H</h3>
                        <p>Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet</p>
                    </div>
                </article>
            </li>
        </ul>
    </li>
</ul>

Если строка содержит только один элемент, вы можете просто переместить свой класс slideDown в $ (this) .parent (). Затем в вашем CSS вы увеличиваете высоту выбранной строки. Чтобы быть равным высоте строки + высоте наложения (таким образом, ваше наложение будет располагаться внизу 0 относительно строки).

Если в вашей строке содержится несколько записей, вы можете использовать второй класс только для изменения высоты строки .

Answer 2

Хорошо, я попробовал ваш код, в конце концов он частично работает, и ключ находится на полях.

Ваш ответ частично решит проблему, поскольку зависит от фиксированного поля и высоты элементов. Из вашего примера, если я сделаю iframe отзывчивым (а не с фиксированной шириной и высотой), мне придется вручную изменять нижнюю границу (медиазапросы) при каждом событии изменения размера окна и каждой точке разрыва.

Наконец, я нашел решение: jquery вычислил высоту и нижнюю границу блоков html. Таким образом, он полностью отзывчив. По какой-то причине здесь, в редакторе SO, div перекрывается (независимо от высоты 'var padding'), но в браузере он работает !!

Вот код

$('.open').on('click', function () {
  $(this).parent().next().addClass('active');
})  
$('.close').on('click', function () {
  $(this).parent().parent().removeClass('active');
})
   
$('.reveal-img').on('click',function(){		
  var padding = 40;
  $('.block').removeClass('slideDown');
  $('.block').css('margin-bottom','0');
  $('.reveal').css('height','0');
  $(this).parent().addClass('slideDown');
		
  $(this).parent().css({'margin-bottom': $(".reveal-content").height() + padding + 'px'});
  $(this).next().css({ "height": $('.reveal-content').height() + padding + 'px'});
		
  $('html, body').animate({
    scrollTop: $('.slideDown').offset().top
   }, 500);
 })
 
$('.close').on('click', function () {
  $(this).parent().parent().removeClass('slideDown');
  $(this).parent().parent().css('margin-bottom','0px');
  $(this).parent().css('height','0');
})

/* ========================================================================== FLEX BOX CUTSOM GRID ========================================================================== */
 .flex-container {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     margin: 0 auto;
     padding: 0 1em;
}
 @media (min-width: 540px) {
     .flex-container {
         max-width: 540px;
    }
}
 @media (min-width: 768px) {
     .flex-container {
         max-width: 768px;
    }
}
 @media (min-width: 992px) {
     .flex-container {
         max-width: 992px;
    }
}
 @media (min-width: 1200px) {
     .flex-container {
         max-width: 1200px;
    }
}
 .flex-row {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     margin-bottom: 1em;
}
 .flex-col-xs-12, .flex-col-sm-12, .flex-col-md-12, .flex-col-lg-12 {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 1em;
     width: 100%;
}
 @media (min-width: 540px) {
     .flex-col-xs-12 {
         max-width: calc(100% * (12 / 12));
         width: calc(100% * (12 / 12));
    }
}
 @media (min-width: 768px) {
     .flex-col-sm-12 {
         max-width: calc(100% * (12 / 12));
         width: calc(100% * (12 / 12));
    }
}
 @media (min-width: 992px) {
     .flex-col-md-12 {
         max-width: calc(100% * (12 / 12));
         width: calc(100% * (12 / 12));
    }
}
 @media (min-width: 1200px) {
     .flex-col-lg-12 {
         max-width: calc(100% * (12 / 12));
         width: calc(100% * (12 / 12));
    }
}
 .flex-col-xs-11, .flex-col-sm-11, .flex-col-md-11, .flex-col-lg-11 {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 1em;
     width: 100%;
}
 @media (min-width: 540px) {
     .flex-col-xs-11 {
         max-width: calc(100% * (11 / 12));
         width: calc(100% * (11 / 12));
    }
}
 @media (min-width: 768px) {
     .flex-col-sm-11 {
         max-width: calc(100% * (11 / 12));
         width: calc(100% * (11 / 12));
    }
}
 @media (min-width: 992px) {
     .flex-col-md-11 {
         max-width: calc(100% * (11 / 12));
         width: calc(100% * (11 / 12));
    }
}
 @media (min-width: 1200px) {
     .flex-col-lg-11 {
         max-width: calc(100% * (11 / 12));
         width: calc(100% * (11 / 12));
    }
}
 .flex-col-xs-10, .flex-col-sm-10, .flex-col-md-10, .flex-col-lg-10 {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 1em;
     width: 100%;
}
 @media (min-width: 540px) {
     .flex-col-xs-10 {
         max-width: calc(100% * (10 / 12));
         width: calc(100% * (10 / 12));
    }
}
 @media (min-width: 768px) {
     .flex-col-sm-10 {
         max-width: calc(100% * (10 / 12));
         width: calc(100% * (10 / 12));
    }
}
 @media (min-width: 992px) {
     .flex-col-md-10 {
         max-width: calc(100% * (10 / 12));
         width: calc(100% * (10 / 12));
    }
}
 @media (min-width: 1200px) {
     .flex-col-lg-10 {
         max-width: calc(100% * (10 / 12));
         width: calc(100% * (10 / 12));
    }
}
 .flex-col-xs-9, .flex-col-sm-9, .flex-col-md-9, .flex-col-lg-9 {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 1em;
     width: 100%;
}
 @media (min-width: 540px) {
     .flex-col-xs-9 {
         max-width: calc(100% * (9 / 12));
         width: calc(100% * (9 / 12));
    }
}
 @media (min-width: 768px) {
     .flex-col-sm-9 {
         max-width: calc(100% * (9 / 12));
         width: calc(100% * (9 / 12));
    }
}
 @media (min-width: 992px) {
     .flex-col-md-9 {
         max-width: calc(100% * (9 / 12));
         width: calc(100% * (9 / 12));
    }
}
 @media (min-width: 1200px) {
     .flex-col-lg-9 {
         max-width: calc(100% * (9 / 12));
         width: calc(100% * (9 / 12));
    }
}
 .flex-col-xs-8, .flex-col-sm-8, .flex-col-md-8, .flex-col-lg-8 {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 1em;
     width: 100%;
}
 @media (min-width: 540px) {
     .flex-col-xs-8 {
         max-width: calc(100% * (8 / 12));
         width: calc(100% * (8 / 12));
    }
}
 @media (min-width: 768px) {
     .flex-col-sm-8 {
         max-width: calc(100% * (8 / 12));
         width: calc(100% * (8 / 12));
    }
}
 @media (min-width: 992px) {
     .flex-col-md-8 {
         max-width: calc(100% * (8 / 12));
         width: calc(100% * (8 / 12));
    }
}
 @media (min-width: 1200px) {
     .flex-col-lg-8 {
         max-width: calc(100% * (8 / 12));
         width: calc(100% * (8 / 12));
    }
}
 .flex-col-xs-7, .flex-col-sm-7, .flex-col-md-7, .flex-col-lg-7 {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 1em;
     width: 100%;
}
 @media (min-width: 540px) {
     .flex-col-xs-7 {
         max-width: calc(100% * (7 / 12));
         width: calc(100% * (7 / 12));
    }
}
 @media (min-width: 768px) {
     .flex-col-sm-7 {
         max-width: calc(100% * (7 / 12));
         width: calc(100% * (7 / 12));
    }
}
 @media (min-width: 992px) {
     .flex-col-md-7 {
         max-width: calc(100% * (7 / 12));
         width: calc(100% * (7 / 12));
    }
}
 @media (min-width: 1200px) {
     .flex-col-lg-7 {
         max-width: calc(100% * (7 / 12));
         width: calc(100% * (7 / 12));
    }
}
 .flex-col-xs-6, .flex-col-sm-6, .flex-col-md-6, .flex-col-lg-6 {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 1em;
     width: 100%;
}
 @media (min-width: 540px) {
     .flex-col-xs-6 {
         max-width: calc(100% * (6 / 12));
         width: calc(100% * (6 / 12));
    }
}
 @media (min-width: 768px) {
     .flex-col-sm-6 {
         max-width: calc(100% * (6 / 12));
         width: calc(100% * (6 / 12));
    }
}
 @media (min-width: 992px) {
     .flex-col-md-6 {
         max-width: calc(100% * (6 / 12));
         width: calc(100% * (6 / 12));
    }
}
 @media (min-width: 1200px) {
     .flex-col-lg-6 {
         max-width: calc(100% * (6 / 12));
         width: calc(100% * (6 / 12));
    }
}
 .flex-col-xs-5, .flex-col-sm-5, .flex-col-md-5, .flex-col-lg-5 {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 1em;
     width: 100%;
}
 @media (min-width: 540px) {
     .flex-col-xs-5 {
         max-width: calc(100% * (5 / 12));
         width: calc(100% * (5 / 12));
    }
}
 @media (min-width: 768px) {
     .flex-col-sm-5 {
         max-width: calc(100% * (5 / 12));
         width: calc(100% * (5 / 12));
    }
}
 @media (min-width: 992px) {
     .flex-col-md-5 {
         max-width: calc(100% * (5 / 12));
         width: calc(100% * (5 / 12));
    }
}
 @media (min-width: 1200px) {
     .flex-col-lg-5 {
         max-width: calc(100% * (5 / 12));
         width: calc(100% * (5 / 12));
    }
}
 .flex-col-xs-4, .flex-col-sm-4, .flex-col-md-4, .flex-col-lg-4 {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 1em;
     width: 100%;
}
 @media (min-width: 540px) {
     .flex-col-xs-4 {
         max-width: calc(100% * (4 / 12));
         width: calc(100% * (4 / 12));
    }
}
 @media (min-width: 768px) {
     .flex-col-sm-4 {
         max-width: calc(100% * (4 / 12));
         width: calc(100% * (4 / 12));
    }
}
 @media (min-width: 992px) {
     .flex-col-md-4 {
         max-width: calc(100% * (4 / 12));
         width: calc(100% * (4 / 12));
    }
}
 @media (min-width: 1200px) {
     .flex-col-lg-4 {
         max-width: calc(100% * (4 / 12));
         width: calc(100% * (4 / 12));
    }
}
 .flex-col-xs-3, .flex-col-sm-3, .flex-col-md-3, .flex-col-lg-3 {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 1em;
     width: 100%;
}
 @media (min-width: 540px) {
     .flex-col-xs-3 {
         max-width: calc(100% * (3 / 12));
         width: calc(100% * (3 / 12));
    }
}
 @media (min-width: 768px) {
     .flex-col-sm-3 {
         max-width: calc(100% * (3 / 12));
         width: calc(100% * (3 / 12));
    }
}
 @media (min-width: 992px) {
     .flex-col-md-3 {
         max-width: calc(100% * (3 / 12));
         width: calc(100% * (3 / 12));
    }
}
 @media (min-width: 1200px) {
     .flex-col-lg-3 {
         max-width: calc(100% * (3 / 12));
         width: calc(100% * (3 / 12));
    }
}
 .flex-col-xs-2, .flex-col-sm-2, .flex-col-md-2, .flex-col-lg-2 {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 1em;
     width: 100%;
}
 @media (min-width: 540px) {
     .flex-col-xs-2 {
         max-width: calc(100% * (2 / 12));
         width: calc(100% * (2 / 12));
    }
}
 @media (min-width: 768px) {
     .flex-col-sm-2 {
         max-width: calc(100% * (2 / 12));
         width: calc(100% * (2 / 12));
    }
}
 @media (min-width: 992px) {
     .flex-col-md-2 {
         max-width: calc(100% * (2 / 12));
         width: calc(100% * (2 / 12));
    }
}
 @media (min-width: 1200px) {
     .flex-col-lg-2 {
         max-width: calc(100% * (2 / 12));
         width: calc(100% * (2 / 12));
    }
}
 .flex-col-xs-1, .flex-col-sm-1, .flex-col-md-1, .flex-col-lg-1 {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 1em;
     width: 100%;
}
 @media (min-width: 540px) {
     .flex-col-xs-1 {
         max-width: calc(100% * (1 / 12));
         width: calc(100% * (1 / 12));
    }
}
 @media (min-width: 768px) {
     .flex-col-sm-1 {
         max-width: calc(100% * (1 / 12));
         width: calc(100% * (1 / 12));
    }
}
 @media (min-width: 992px) {
     .flex-col-md-1 {
         max-width: calc(100% * (1 / 12));
         width: calc(100% * (1 / 12));
    }
}
 @media (min-width: 1200px) {
     .flex-col-lg-1 {
         max-width: calc(100% * (1 / 12));
         width: calc(100% * (1 / 12));
    }
}
/*******************************************/
 .video-container {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
}
 .video-container iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
 .video-wrapper {
}
 .close {
     color: #ffffff !important;
     float: right;
     font-size: 60px;
     font-weight: normal;
     text-decoration: none;
     position: absolute;
     top: 30px;
     right: 30px;
     z-index: 999;
}
 .close:hover, .close:focus {
     color: #000;
     text-decoration: none;
     cursor: pointer;
}
/*****************************/
/* cc grid*/
/****************************/
 .block{
     margin-bottom:0;
     transition: margin .5s ease-in;
}
 .block .close {
     top: 15px;
     right: 15px;
}
 .block.slideDown{
     margin-bottom: 380px;
}
 .reveal-container{
     position:relative;
}
 .reveal-video-wrapper{
     width:100%;
}
 .reveal-video-wrapper{
     visibility:hidden;
     opacity:0;
     transition: opacity 1s ease-in;
}
 .reveal{
     visibility:hidden;
     opacity:0;
     position: absolute;
     background: #ddd;
     top: auto;
     left: 0;
     width: 100%;
     margin-top: 20px;
     text-align: left;
     height: 0;
     overflow: hidden;
     transition: height .3s ease-in;
     padding-top:35px 
}
 .reveal-content{
     display:flex;
     justify-content:flex-start;
     align-items:center;
     flex-wrap:wrap 
}
 .reveal-img{
     position:relative 
}
.reveal-img img{
  max-width:100%
  }
 .slideDown .reveal-video-wrapper{
     visibility:visible;
     opacity:1;
}
 .slideDown .reveal{
     visibility:visible;
     opacity:1;
     height: auto;
     overflow: visible;
}
 .slideDown .reveal-img::after {
     bottom:-21px;
     width: 0;
     height: 0;
     border-right: 16px solid transparent;
     border-left: 16px solid transparent;
     border-bottom: 20px solid #ddd;
     content: " ";
     height: 0;
     width: 0;
     position: absolute;
     pointer-events: none;
     border-width: 15px;
     left:50%;
     margin: -20px 0 0 -15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article>
   <div class="flex-container">
      <div class="flex-row">
         <div class="flex-col-sm-4 block">
            <div class="reveal-img">
               <img src="https://images.unsplash.com/flagged/photo-1578405302740-01f514c1ec64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
            </div>
            <div class="reveal">
               <!-- Modal content -->
               <a class="close">&times;</a>
               <div class="reveal-content">
                  <div class="reveal-video-wrapper flex-col-lg-6 flex-col-sm-8">
                     <div class="video-container">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/DrBy7MyiqJU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                     </div>
                  </div>
                  <div class="infos flex-col-lg-6 flex-col-sm-4">
                     <h3>Title</h3>
                     <div class="reveal-text">
                        Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="flex-col-sm-4 block">
            <div class="reveal-img">
               <img src="https://images.unsplash.com/flagged/photo-1578405302740-01f514c1ec64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
            </div>
            <div class="reveal">
               <!-- Modal content -->
               <a class="close">&times;</a>
               <div class="reveal-content">
                  <div class="reveal-video-wrapper flex-col-lg-6 flex-col-sm-8">
                     <div class="video-container">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/YkkezwcBZLQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                     </div>
                  </div>
                  <div class="infos flex-col-lg-6 flex-col-sm-4">
                     <h3>Title</h3>
                     <div class="reveal-text">
                        Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="flex-col-sm-4 block">
            <div class="reveal-img">
               <img src="https://images.unsplash.com/flagged/photo-1578405302740-01f514c1ec64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
            </div>
            <div class="reveal">
               <!-- Modal content -->
               <a class="close">&times;</a>
               <div class="reveal-content">
                  <div class="reveal-video-wrapper flex-col-lg-6 flex-col-sm-8">
                     <div class="video-container">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/fR2q_Xe7kqA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                     </div>
                  </div>
                  <div class="infos flex-col-lg-6 flex-col-sm-4">
                     <h3>Title</h3>
                     <div class="reveal-text">
                        Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="flex-row">
         <div class="flex-col-sm-4 block">
            <div class="reveal-img">
               <img src="https://images.unsplash.com/flagged/photo-1578405302740-01f514c1ec64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
            </div>
            <div class="reveal">
               <!-- Modal content -->
               <a class="close">&times;</a>
               <div class="reveal-content">
                  <div class="reveal-video-wrapper flex-col-lg-6 flex-col-sm-8">
                     <div class="video-container">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/rQhHkr-1qGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                     </div>
                  </div>
                  <div class="infos flex-col-lg-6 flex-col-sm-4">
                     <h3>Title</h3>
                     <div class="reveal-text">
                        Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="flex-col-sm-4 block">
            <div class="reveal-img">
               <img src="https://images.unsplash.com/flagged/photo-1578405302740-01f514c1ec64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
            </div>
            <div class="reveal">
               <!-- Modal content -->
               <a class="close">&times;</a>
               <div class="reveal-content">
                  <div class="reveal-video-wrapper flex-col-lg-6 flex-col-sm-8">
                     <div class="video-container">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/iaAgm4lO3tw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                     </div>
                  </div>
                  <div class="infos flex-col-lg-6  flex-col-sm-4">
                     <h3>Title</h3>
                     <div class="reveal-text">
                        Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="flex-col-sm-4 block">
            <div class="reveal-img">
               <img src="https://images.unsplash.com/flagged/photo-1578405302740-01f514c1ec64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
            </div>
            <div class="reveal">
               <!-- Modal content -->
               <a class="close">&times;</a>
               <div class="reveal-content">
                  <div class="reveal-video-wrapper flex-col-lg-6 flex-col-sm-8">
                     <div class="video-container">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/fR2q_Xe7kqA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                     </div>
                  </div>
                  <div class="infos flex-col-lg-6 flex-col-sm-4">
                     <h3>Title</h3>
                     <div class="reveal-text">
                        Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</article>