Наложить форму на сетку изображений

Question

У меня есть код, использующий bootstrap 4

<div class="container-fluid">
      <div class="row">
          <div class="col-lg-6">
               <a class="lightbox" href="./images/bg.jpg">
                <img src="{{ listing.photo_main.url }}" alt="" class="img-fluid">
              </a>
          </div>
            <div class="row col-lg-6">
                <div class="col-md-6">
                  <a class="lightbox" href="./images/bg.jpg">
                    <img src="{{ listing.photo_1.url }}" alt="" width="370px" height="240px">
                  </a>
                </div>
                <div class="col-md-6">
                  <a class="lightbox" href="./images/bg.jpg">
                    <img src="{{ listing.photo_2.url }}" alt=""  width="370px" height="240px">
                  </a>
                </div>
                <div class="col-md-6">
                  <a class="lightbox" href="./images/bg.jpg">
                    <img src="{{ listing.photo_3.url }}" alt="" width="370px" height="240px">
                  </a>
                </div>
                <div class="col-md-6">
                  <a class="lightbox" href="./images/bg.jpg">
                    <img src="{{ listing.photo_4.url }}" alt="" width="370px" height="240px">
                  </a>
                </div>
              </div>
      </div>
    </div>

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

Answer 1

Обратитесь к этому URL, чтобы узнать, как добавить форму к изображению - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_form_on_image, надеюсь, это поможет ...