Возможно ли допустить переполнение изображения div без изменения размера div?

Question

Фон

Я создаю макет с помощью Bootstrap 4.

Вот изображение, которое примерно показывает, чего я хочу достичь:

И примерно, это построено так:

<div class="row">
    <div class="col-12 col-md-3">
        <img src="..." style="width:100%; max-width: 400px;" />
    </div>
    <div class="col-12 col-md-6">
        TITLE
    </div>
</div>

<div class="row">
    <div class="col-12 col-md-6 offset-md-3">
        CONTENT
    </div>
</div>

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

Моя проблема

Размер изображения разумный, но он сдвигает линию L2 (как показано на рисунке) вниз, если я не сохраню изображение очень маленьким, используя атрибут max-width css.

Моя цель

Мне бы хотелось, чтобы это изображение было немного больше без изменения высоты <div class="row">, содержащей его. Т.е. без нажатия L2 вниз.

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

Возможно ли это?

Что я пробовал

Я рассмотрел различные атрибуты overflow-y css, но ни один из них не достиг этого.

Буду признателен за любую помощь.

Цель

Answer 1

Вы всегда можете использовать z-index! Просто установите в первой позиции строки «относительный», а затем примените соответствующий z-индекс. После этого просто присвойте контейнеру изображения заданную высоту, которая больше, чем содержащий div.

Я создал простой рабочий пример здесь: https://jsfiddle.net/cf8z06ya/

.firstRow {
  width: 100%;
  background-color: red;
  height: 50px;
  position: relative;
  z-index: 1;
}

.secondRow {
  width: 100%;
  background-color: yellow;
  height: 50px;
}

.overrun {
  width: 50px;
  height: 100px;
  background-color: black;
}

Надеюсь, это поможет!