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

Question

На рисунке показано, что я пытаюсь сделать.Я пробовал разные методы, но мне не повезло.Я также пытаюсь сделать его отзывчивым, однако, когда я делаю экран меньше, ящики начинают перекрывать друг друга.https://imgur.com/ALX9qTD

Другой метод, который я использовал, состоял в том, чтобы сделать каждый из полей изображением и добавить текст, но я столкнулся с аналогичной проблемой, когда размер экрана был изменен.https://imgur.com/Ma3V27B

<div class="container-bg">
        <div class="container">
          <div class="products">
            <h1>PRODUCTS</h1>
            <div class="row">
              <div class="col-md-3">
                <div class="box">
                  <img src="img/red.png" class="img-responsive">
                  <p class="bottom">PPE</p>
                </div>
              </div>

                <div class="col-md-3">
                <div class="box">
                  <img src="img/green.png" class="img-responsive">
                  <p class="bottom">FOOTWEAR</p>
                </div>
              </div>

                <div class="col-md-3">
                <div class="box">
                  <img src="img/blue.png" class="img-responsive">
                  <p class="bottom">CLOTHING</p>
                </div>
              </div>

                <div class="col-md-3">
                <div class="box">
                  <img src="img/black.png" class="img-responsive">
                  <p class="bottom">RAIL TOOLS</p>
                </div>
              </div>
           </div>
         </div>
       </div>
     </div>
   </div>


    .box{
    position: relative;
    overflow: hidden;
    color: #fff;
    border-radius: ;
    display: inline-grid;
    text-align: center;
    padding: 5px;
    }

    .box img{
     width: 250px;
    height:200px;
    }

    .bottom,
    .right{
     margin:5em;
     position:absolute;
      }

      .bottom{
        bottom: 0px;
        }

      .right{
       right: 0px;
       top: 0px;
       }

Answer 1

Исходя из того, что вы используете класс img-responsive, я предполагаю, что вы используете Bootstrap 3.x, хотя это решение будет работать для 4.x с минимальными изменениями (в большинстве случаев изменение imp-responsive на * 1003) * и сбросив суффикс xs).

Вы на правильном пути, полагаясь на position:absolute. Это единственный способ разместить текст над <img> без замены изображения на background.

.box {
  position: relative;
  margin-bottom: 3rem;
}
  
.box p,
.box h2 {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
}

.box h2 {
  padding: 2vmax;
  font-size: 2vmax;
}

.box p {
  bottom: 0;
  background: RGBA(0,0,0,0.85);
  padding: .5vmax 1vmax;
  font-size: 1vmax;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-3">
      <div class="box">
        <h2>Name One</h2>
        <p>Test One</p>
        <img src="https://placehold.it/450/fc4349/ff8084/&text=Image" class="img-responsive" />
      </div>
    </div>

    <div class="col-xs-6 col-sm-3">
      <div class="box">
        <h2>Name One</h2>
        <p>Test Two</p>
        <img src="https://placehold.it/450/8dc041/a6d85b/&text=Image" class="img-responsive" />
      </div>
    </div>

    <div class="col-xs-6 col-sm-3">
      <div class="box">
        <h2>Name One</h2>
        <p>Test Three</p>
        <img src="https://placehold.it/450/3598d8/5fb3ea/&text=Image" class="img-responsive" />
      </div>
    </div>

    <div class="col-xs-6 col-sm-3">
      <div class="box">
        <h2>Name One</h2>
        <p>Test Four</p>
        <img src="https://placehold.it/450/292c33/4a4f5b/&text=Image" class="img-responsive" />
      </div>
    </div>
  </div>  
</div>

Примечание. Этот же код можно увидеть в Bootply (где он будет выглядеть больше по умолчанию): https://www.bootply.com/49AuIAv7Bn

Главное, что вам необходимо учитывать, - это отзывчивое поведение. Для моего примера я использовал быстрый и грязный блок vmax, хотя вы могли бы иметь больший контроль / согласованность, используя @media контрольные точки для изменения шрифта и отступов.

Если бы вы изучили этот маршрут, я бы настоятельно рекомендовал просто использовать точки прерывания мультимедиа, используемые Bootstrap 3.x: https://getbootstrap.com/docs/3.3/css/#grid-media-queries