Как сделать так, чтобы текст перекрывался, когда изображение плавает вправо

Question

Я пытаюсь создать текст, перекрывающий изображение на моем веб-сайте. Это вывод, который я хочу:

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

#image-overlap {
  position: relative;
  margin: 50px 0%;
}

.overlap-text {
  position: absolute;
  left: 55%;
  bottom: 10%;
  width: 43%;
  font-size: 30px;
  line-height: 50px;
  font-weight: 200;
  color: #000;
}

.overlap-text h1 {
  color: #000;
}

#image-overlap-right img {
  float: right;
}

.overlap-text-right {
  position: absolute;
  right: 55%;
  bottom: 10%;
  width: 43%;
  font-size: 30px;
  line-height: 50px;
  font-weight: 200;
  color: #000;
}

.overlap-text-right h1 {
  color: #000;
}

.overlap-text-right img {
  float: right;
}

<div class="col-md-12">
  <div id="image-overlap" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text">
      <h1> Honest and open bonus structure</h1>
    </div>
  </div>

  <div id="image-overlap-right" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text-right">
      <h1> Marketing leading infrastructure</h1>
    </div>
  </div>
</div>

Код для моей проблемы https://codepen.io/mrsalami/pen/MXRZdE

Answer 1

Что об этом:

#image-overlap {
    position: relative;
    margin: 50px 0%;
  index:1
}

.overlap-text {
    position: absolute;
    left: 55%;
    bottom: -90%;
    width: 43%;
    font-size: 30px;
    line-height: 50px;
    font-weight: 200;
  z-index:9;
    color: #000;
    h1{
        color: #000;
    }
}

#image-overlap-right{
  img{
    float:right;
    position:relative;
  }
}

.overlap-text-right {
    position: absolute;
    right: 20%;
    bottom: 20%;
    width: 43%;
    font-size: 30px;
    line-height: 50px;
    font-weight: 200;
    color: #000;
    h1{
        color: #000;
    }
  img{
    float:right;
  }
}

<div class="col-md-12">
  <div id="image-overlap" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text">
      <h1> Honest and open bonus structure</h1>
    </div>
  </div>
  
  <div id="image-overlap-right" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text-right">
      <h1> Marketing leading infrastructure</h1>
    </div>
  </div>
</div>

Я использовал комбинацию z-index и right / bottom. В любом случае вы должны управлять отзывчивой частью. Так что редактируйте правый / нижний% s

Answer 2

Вам не хватает простого свойства, чтобы увидеть ваше второе изображение с плавающей справа. Вам нужно дать width вашему image-overlap-right div.

Это ширина вашего фрагмента с добавлением width: 100%;:

#image-overlap {
position: relative;
margin: 50px 0%;
}

.overlap-text {
position: absolute;
left: 55%;
bottom: 10%;
width: 43%;
font-size: 30px;
line-height: 50px;
font-weight: 200;
color: #000;
h1{
    color: #000;
}
}

#image-overlap-right{
  position: absolute;
  width: 100%;
}
#image-overlap-right img{
  float:right;
}

.overlap-text-right {
position: absolute;
right: 55%;
top: 10%;
width: 43%;
font-size: 30px;
line-height: 50px;
font-weight: 200;
color: #000;
h1{
    color: #000;
}
}

<div class="col-md-12">
  <div id="image-overlap" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text">
      <h1> Honest and open bonus structure</h1>
    </div>
  </div>
  
  <div id="image-overlap-right" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text-right">
      <h1> Marketing leading infrastructure</h1>
    </div>
  </div>
</div>

Я также немного изменил положение вашего второго текстового элемента.

Answer 3

Вы должны использовать position: relative для своих текстовых блоков вместо position: absolute, потому что абсолютное позиционирование удаляет блок из потока, когда относительное позиционирование оставляет блок в нормальном потоке, но перемещает его относительно его начальных координат. Просто установите position: relative и измените координаты (left, right, bottom или top) на результат, который вас удовлетворит:)