CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4overlay
tree em
tree em

Reputation: 21721

Overlay a form on the grid of images

I have a code using 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>

Everyone please suggest, how can I make an overlay submit form as image below.

enter image description here

Upvotes: 0

Views: 41

Answers (1)

Venkat
Venkat

Reputation: 93

Refer this url on how To Add a Form to an Image - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_form_on_image, hope this helps...

Upvotes: 1

Related Questions