Скрытие переполнения на колонне с желобами

Question

Я пытаюсь настроить сетку миниатюр для сообщений в блоге, используя Bootstrap 4.

Размер столбцов col-md-6.Внутри каждого из столбцов есть якорь с фоновой фотографией и черным -> прозрачным наложением градиента.

Все работает нормально, однако наложение градиента расширяется за ширину контейнера, как вы можетесм. изображение ниже.

Разметка:

<div class="container homeSection">
  <div class="row">
    <div class="col-md-6 dualBlogCallout">
      <a href="#">
        <div class="img-holder border-radius-15">
          <div class="dualGradient"></div>
          <img src="assets/img/beachPlaceholder.png" class="img-fluid w-100" alt="Blog Alt"/>
        </div>
      </a>
    </div>
    <div class="col-md-6 dualBlogCallout">
      <a href="#">
        <div class="img-holder border-radius-15">
          <div class="dualGradient"></div>
          <img src="assets/img/beachPlaceholder.png" class="img-fluid w-100" alt="Blog Alt"/>
        </div>
      </a>
    </div>
  </div>
</div>

CSS:

.dualBlogCallout{
  color: white;
  position: relative;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 5;
}
.dualBlogCallout a{
  overflow: hidden;
}
.dualGradient{
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 1;
  width: 100%;
  height: 300px;
  pointer-events: none;
  z-index: 1;
}

Вот мой желаемый результат:

Как я могу получить абсолютно позиционированный градиент, чтобы просто оставаться в пределахякорь без переполнения и без использования начальной загрузки 4 no-gutter класс?

Answer 1

position: relative; отсутствует в вашем img-holder классе.Вот решение, отображающее ваш код.

Примечание. Я добавил класс радиуса границы, поскольку он не был включен в исходное сообщение

.img-holder {
  position: relative;
}
.dualBlogCallout{
  color: white;
  position: relative;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 5;
}
.dualBlogCallout a{
  overflow: hidden;
}
.dualGradient{
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 1;
  width: 100%;
  height: 300px;
  pointer-events: none;
  z-index: 1;
}

.border-radius-15 {
  border-radius: 15px;
  overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container homeSection">
  <br><br>
  <div class="row">
    <div class="col-md-6 dualBlogCallout">
      <a href="#">
        <div class="img-holder border-radius-15">
          <div class="dualGradient"></div>
          <img src="https://via.placeholder.com/200x100" class="img-fluid w-100" alt="Blog Alt"/>
        </div>
      </a>
    </div>
    <div class="col-md-6 dualBlogCallout">
      <a href="#">
        <div class="img-holder border-radius-15">
          <div class="dualGradient"></div>
          <img src="https://via.placeholder.com/200x100" class="img-fluid w-100" alt="Blog Alt"/>
        </div>
      </a>
    </div>
  </div>
</div>

Answer 2

Добавьте правило в свой css:

.img-holder { position: relative; }

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

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