Блог

Главная - Вопросы по программированию - Как мне перекрыть изображения (разделы или столбцы) в bootstrap 4?

Как мне перекрыть изображения (разделы или столбцы) в bootstrap 4?

#html #bootstrap-4 #overlap

#HTML #bootstrap-4 #перекрытие

Вопрос:

Я бы хотел, чтобы это было именно так введите описание изображения здесь

И пока что так оно и есть сейчас

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

вот мой код для этого: 

         <div class="col-md-10 offset-sm-2 slider">
            <ul class="slides">
                <li>
                    <div class="col-sm-6">
                        <ul class="block-stories overlap-left">
                            <li>
                                <ul class="block-storie">
                                 <li class="block-title before">
                                 <h6 class="bold mb-0">Before</h6>
                        </li>
                        <li><img src="img/11.jpg" alt=""></li>
                    </ul>
                </li>
                </ul>
                </div>
                <div class="col-sm-6">
                        <ul class="block-stories overlap-right">
                                <li>
                                    <ul class="block-storie">
                                     <li class="block-title after">
                                     <h6 class="bold mb-0 colored">After</h6>
                            </li>
                            <li><img src="img/12.jpg" alt=""></li>
                        </ul>
                    </li>
                    </ul>
                </div>
                </li>
            </ul>
        </div>

что я делаю не так? можно ли для этого использовать css и перемещать изображения по позициям? но если я это сделаю, не усложнит ли это медиа-запрос?
Ниже приведен код CSS.
CSS

 .slider .slides {
    margin-top: 1em;
    margin-bottom: 1em;
}
.block-storie {
    margin-right: 4em;
    margin-left: 4em;
    border: 1px solid #ececec;
    background: #ffffff;
}
.block-stories.overlap-left {
    left: 6em;
    position: relative;
    top: -2.5em;
}
.block-stories.overlap-right {
    position: relative;
    right: 6em;
    top: -0.8em;
}
.block-storie li {
    display: block;
}
.block-storie li:last-child {
    border: 5px solid #ffffff;
}
.block-storie li.block-title {
    padding: .6em .6em .2em;
    text-align: center;
}
.block-storie li.block-title {
    background: #ffffff;
}

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

1. У вас есть какой-нибудь CSS-код?

2. CSS — .slider .slides { margin-top: 1em; margin-bottom: 1em; } .block-storie {margin-right: 4em; margin-left: 4em; граница: 1px сплошная # ececec; background: #ffffff; } .block-stories.overlap-left { слева: 6em; позиция: относительная; сверху: -2,5em; } .block-stories.overlap-right {позиция: относительная; справа: 6em; верхний: -0.8em; } .блок-storie li { отображение: блок; } .блок-storie li: последний дочерний элемент {граница: сплошная 5 пикселей #ffffff; } .блок-storie li.блок-title { отступ: .6em .6em .2em; выравнивание текста: по центру; } .блок-storie li.блок-title { фон: #ffffff; }